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

---
id: 5a24c314108439a4d4036170
title: 创建一个有状态的组件
challengeType: 6
forumTopicId: 301391
---

# --description--

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

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

```jsx
this.state = {
  // describe your state here
}
```

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

# --instructions--

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

# --hints--

`StatefulComponent`应该存在并被渲染。

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

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

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

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

```js
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`元素里。

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

# --solutions--