4.6 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036171	ユーザーインターフェイスに state をレンダーする	6	301409	render-state-in-the-user-interface

--description--

コンポーネントの初期状態を定義したら、レンダーされる UI に、そのコンポーネントの任意の部分を表示することができます。コンポーネントがステートフルの場合は、コンポーネントから常に自身の render() メソッドの中で state のデータにアクセスできます。データへのアクセスには this.state を使用できます。

render メソッドの return の中で state 値にアクセスしたい場合は、値を中括弧で囲む必要があります。

state は React で最も強力なコンポーネントの機能の一つです。アプリの重要なデータを追跡して、このデータの変更に応じて UI をレンダーすることができます。データが変更されると、UI が変更されます。 React では、仮想 DOM と呼ばれるものを使用して、見えないところで変更を追跡しています。 state のデータが更新されると、データを prop として受け取った子コンポーネントを含めて、そのデータを使用しているコンポーネントの再レンダーをトリガーします。実際の DOM も更新しますが、必要な場合に限られます。つまり、DOM の変更を気にする必要はない、ということです。単に UI をどのように表示させるかを宣言するだけです。

あるコンポーネントをステートフルにした場合、他のコンポーネントはその state を認識しないことに注意してください。 state データを props として子コンポーネントに渡さない限り、state は完全にカプセル化されるか、またはそのコンポーネントに対してローカルになります。 state のカプセル化という考え方はとても重要です。なぜなら、特定のロジックを記述して、そのロジックをコード内の 1 か所に閉じ込めて分離しておけるからです。

--instructions--

コードエディターにある MyComponent はすでにステートフルになっています。コンポーネントの render メソッドで h1 タグを定義し、コンポーネントの state から name の値をレンダーしてください。

注: h1 では state の値のみをレンダーし、それ以外はレンダーしないでください。 JSX では、中括弧 { } で記述されたコードはすべて JavaScript として扱われます。そのため、state から値にアクセスするには参照を中括弧で囲みます。

--hints--

MyComponent で、キー name を設定し、その state に値 freeCodeCamp を格納します。

assert(
  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
    'freeCodeCamp'
);

MyComponent で、h1 見出し要素を単一の div で囲んでレンダーします。

assert(
  /<div><h1>.*<\/h1><\/div>/.test(
    Enzyme.mount(React.createElement(MyComponent)).html()
  )
);

レンダーされる h1 見出し要素には、コンポーネントの state からレンダーされたテキストのみを含めます。

async () => {
  const waitForIt = (fn) =>
    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
  const first = () => {
    mockedComponent.setState({ name: 'TestName' });
    return waitForIt(() => mockedComponent.html());
  };
  const firstValue = await first();
  const getValue = firstValue.replace(/\s/g, '');
  assert(getValue === '<div><h1>TestName</h1></div>');
};

--seed--

--after-user-code--

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

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* Change code below this line */ }

        { /* Change code above this line */ }
      </div>
    );
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* Change code below this line */ }
        <h1>{this.state.name}</h1>
        { /* Change code above this line */ }
      </div>
    );
  }
};

4.6 KiB Raw Blame History