freeCodeCamp/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-react-component.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036163	创建一个 React 组件	6	301386	create-a-react-component

--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 元素。

--hints--

该 React 组件应该返回一个 div 元素。

assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');

返回的 div 中应该渲染一个 h1 标题。

assert(
  /<div><h1>.*<\/h1><\/div>/.test(
    Enzyme.shallow(React.createElement(MyComponent)).html()
  )
);

h1 标题中应该包含字符串 Hello React!。

assert(
  Enzyme.shallow(React.createElement(MyComponent)).html() ===
    '<div><h1>Hello React!</h1></div>'
);

--seed--

--after-user-code--

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

--seed-contents--

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



    // Change code above this line
  }
};

--solutions--

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
  }
};