freeCodeCamp/add-inline-styles-in-react.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

3.7 KiB

Raw Blame History

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
5a24c314108439a4d4036182	6	301378	在 React 中添加内联样式

Description

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

Instructions

如果你有大量样式，你可以将 style对象分配给一个常量，以保持代码的组织有序。取消对styles常量的注释，并声明具有三个样式属性及对应值的对象。使div的文字颜色为"purple"、字号为40、边框为"2px solid purple"。然后设置style属性，使其等于styles常量。

Tests

tests:
  - text: <code>styles</code>变量应该是具有三个属性的<code>对象</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

ReactDOM.render(<Colorful />, document.getElementById('root'))

Solution

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

3.7 KiB Raw Blame History Unescape Escape