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

Files

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

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

3.6 KiB

Raw Blame History

id, challengeType, forumTopicId, title

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

Description

React中最重要的主题之一是state。 state 包含应用程序需要了解的任何数据，这些数据可能会随时间而变化。你希望应用程序能够响应 state 的变更，并在必要时显示更新后的 UI。React 为现代 Web 应用程序的状态管理提供了一个很好的解决方案。你可以通过在constructor中的组件类上声明state属性来在 React 组件中创建 state，它在创建时使用state初始化组件。state属性必须设置为 JavaScript对象。声明如下：

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

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

Instructions

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

Tests

tests:
  - text: <code>StatefulComponent</code>应该存在并被渲染。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })());
  - text: <code>StatefulComponent</code>应该渲染一个<code>div</code>元素和一个<code>h1</code>元素。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })());
  - text: 应使用被设置为字符串的<code>name</code>属性来初始化<code>StatefulComponent</code>的 state。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })());
  - text: <code>StatefulComponent</code>中 state 的<code>name</code>属性应该渲染在<code>h1</code>元素里。
    testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })());

Challenge Seed


class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    // initialize state here

  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

After Test

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

Solution

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

3.6 KiB Raw Blame History Unescape Escape