freeCodeCamp/curriculum/challenges/chinese-traditional/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>
    );
  }
};