freeCodeCamp/create-a-react-component.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Files

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

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

3.0 KiB

Raw Blame History

id, challengeType, forumTopicId, title

id	challengeType	forumTopicId	title
5a24c314108439a4d4036163	6	301386	创建一个 React 组件

Description

定义 React 组件的另一种方法是使用 ES6 的class语法。在以下示例中，Kitten扩展了React.Component：

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

这将创建一个 ES6 类Kitten，它扩展了React.Component类。因此，Kitten类现在可以访问许多有用的 React 功能，例如本地状态和生命周期钩子。如果你还不熟悉这些术语，请不要担心，在以后的挑战中我们将更详细地介绍它们。另请注意，Kitten类中定义了一个调用super()方法的constructor。它使用super()调用父类的构造函数，即本例中的React.Component。构造函数是使用class关键字创建的特殊方法，它用在实例初始化之前。最佳做法是在组件的constructor里调用super，并将props传递给它们，这样可以保证组件能够正确地初始化。现在，你只需要知道这是标准的做法。很快你会看到构造函数的其他用途以及props。

Instructions

MyComponent是使用类语法在代码编辑器中定义的。完成render方法的编写，使其返回div元素，其中包含文本内容为Hello React!的h1元素。

Tests

tests:
  - text: 该 React 组件应该返回一个<code>div</code>元素。
    testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
  - text: 返回的<code>div</code>中应该渲染一个<code>h1</code>标题。
    testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()));
  - text: <code>h1</code>标题中应该包含字符串<code>Hello React!</code>。
    testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>');

Challenge Seed


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // change code below this line



    // change code above this line
  }
};

After Test

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

Solution

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // change code below this line
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
    );
    // change code above this line
  }
};

3.0 KiB Raw Blame History Unescape Escape