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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036170	创建一个有状态的组件	6	301391	create-a-stateful-component

--description--

React 中最重要的主题之一是 state。 state 包含应用程序需要了解的任何数据，这些数据可能会随时间而变化。 应用程序能够响应 state 的变更，并在必要时显示更新后的 UI。 React 为现代 Web 应用程序的状态管理提供了一个很好的解决方案。

可以在类组件的 constructor 上声明 state 属性来在 React 组件中创建 state， 它在创建时使用 state 初始化组件。 state 属性必须设置为 JavaScript object（对象）。 声明如下：

this.state = {

}

可以在组件的整个生命周期内访问 state 对象， 可以更新它、在 UI 中渲染它，也可以将其作为 props 传递给子组件。 state 对象的使用可以很简单，亦可以很复杂，就看你怎么用了。 请注意，必须通过扩展 React.Component 来创建类组件，以便像这样创建 state。

--instructions--

代码编辑器中有一个组件试图从其 state 中渲染一个 name 属性， 但是 state 还没有定义。 在 constructor 中使用 state 初始化组件，并将你的名字赋给 name 属性。

--hints--

StatefulComponent 应该存在并被渲染。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return mockedComponent.find('StatefulComponent').length === 1;
  })()
);

StatefulComponent 应该渲染一个 div 元素和一个 h1 元素。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    return (
      mockedComponent.find('div').length === 1 &&
      mockedComponent.find('h1').length === 1
    );
  })()
);

应使用被设置为字符串的 name 属性来初始化 StatefulComponent 的 state。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return (
      typeof initialState === 'object' && typeof initialState.name === 'string'
    );
  })()
);

StatefulComponent 中 state 的 name 属性应该渲染在 h1 元素里。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(StatefulComponent)
    );
    const initialState = mockedComponent.state();
    return mockedComponent.find('h1').text() === initialState.name;
  })()
);

--seed--

--after-user-code--

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

--seed-contents--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    // Only change code below this line

    // Only change code above this line
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

--solutions--

class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp!'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};