freeCodeCamp/add-inline-styles-in-react.chinese.md at 4605ec5ec6587f4578fb0ff1ae3b7c6e5c116278

Files

Oliver Eyton-Williams 61460c8601 fix: insert blank line after ```

search and replace ```\n< with ```\n\n< to ensure there's an empty line
before closing tags

2020-08-16 04:45:20 +05:30

3.4 KiB

Raw Blame History

id, title, challengeType, isRequired, videoUrl, localeTitle

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036182	Add Inline Styles in React	6	false		在React中添加内联样式

Description

您可能已经注意到，在上一个挑战中，除了设置为JavaScript对象的style属性之外，还有HTML内联样式的其他几种语法差异。首先，某些CSS样式属性的名称使用驼峰大小写。例如，最后一个挑战使用fontSize而不是font-size设置font-size 。像font-size这样的连字符是JavaScript对象属性的无效语法，因此React使用驼峰大小写。通常，任何带连字符的样式属性都是使用JSX中的camel case编写的。除非另有说明，否则假定所有属性值长度单位（如height ， width和fontSize ）均为px 。例如，如果要使用em ，则将值和单位用引号括起来，如{fontSize: "4em"} 。除了默认为px的长度值之外，所有其他属性值都应该用引号括起来。

Instructions

如果您有大量样式，则可以将样式object分配给常量以保持代码的有序性。取消注释styles常量并声明具有三个样式属性及其值的object 。给div一个颜色为"purple" ，字体大小为40 ，边框为"2px solid purple" 。然后将style属性设置为等于styles常量。

Tests

tests:
  - text: <code>styles</code>变量应该是具有三个属性的<code>object</code> 。
    testString: assert(Object.keys(styles).length === 3);
  - text: <code>styles</code>变量的<code>color</code>属性应设置为<code>purple</code>的值。
    testString: assert(styles.color === 'purple');
  - text: <code>styles</code>变量应该将<code>fontSize</code>属性设置为值<code>40</code> 。
    testString: assert(styles.fontSize === 40);
  - text: <code>styles</code>变量应该将<code>border</code>属性设置为<code>2px solid purple</code>的值。
    testString: assert(styles.border === "2px solid purple");
  - text: 该组件应呈现<code>div</code>元素。
    testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })());
  - text: <code>div</code>元素的样式应该由<code>styles</code>对象定义。
    testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })());

Challenge Seed

// const styles =
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
    );
    // change code above this line
  }
};

After Test

console.info('after the test');

Solution

// solution required

/section>

3.4 KiB Raw Blame History Unescape Escape