Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

4.0 KiB

Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036170	ステートフルコンポーネントを作成する	6	301391	create-a-stateful-component

--description--

React で最も重要なトピックの一つとなっているのが state です。 state (状態、ステート) は、アプリケーションが認識する必要のあるデータで構成され、時間とともに変化する可能性があります。アプリでは通常、必要に応じて状態の変化に応答し、更新された UI を表示します。 React は、最新のウェブアプリケーションの状態管理に適したソリューションを備えています。

React コンポーネントで state を作成するには、constructor のコンポーネントクラスで state プロパティを宣言します。これにより、コンポーネントが作成時に state で初期化されます。 state プロパティは JavaScript の object に設定する必要があります。宣言は次のようになります。

this.state = {

}

コンポーネントが存在している間は、state オブジェクトにアクセスすることができます。更新したり、UI にレンダーしたり、props として子コンポーネントに渡したりすることができます。 state オブジェクトは必要に応じて単純なものにも複雑なものにもすることができます。こうした state を作成するには、React.Component を拡張してクラスコンポーネントを作成する必要があります。

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

StatefulComponent の state を初期化し、プロパティ name に文字列を設定します。

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

4.0 KiB Raw Permalink Blame History