親子コンポーネントのレンダリング方法は何ですか？

2年 ago
結衣, 春花
1 minute

Reactでは、親子コンポーネント間のレンダリングは2つの方法で実現できます。

  1. 属性の伝達：親コンポーネントがpropsを通じてデータを子コンポーネントに伝え、子コンポーネントでレンダリングする。親コンポーネントは必要に応じて子コンポーネントに伝える属性を動的に変更することができ、それにより子コンポーネントを動的にレンダリングする効果を実現することができる。例：
// 父组件
function ParentComponent() {
  const data = 'Hello World';
  return <ChildComponent data={data} />;
}

// 子组件
function ChildComponent(props) {
  return <div>{props.data}</div>;
}
  1. Reactのコンテキスト機能を使用すると、親コンポーネントが子コンポーネントにデータを渡し、子コンポーネントで表示することができます。属性の受け渡しと比べて、コンテキストの受け渡しは複数階層のコンポーネントをまたいで行うことができますし、階層ごとに props を使って明示的に受け渡す必要もありません。ただし、コンテキストの使用はコンポーネント同士の結合を増やす可能性があるため、使用する際にはシーンとコンポーネント間の関係に注意する必要があります。例えば：
// 父组件
class ParentComponent extends React.Component {
  static childContextTypes = {
    data: PropTypes.string
  };

  getChildContext() {
    return {
      data: 'Hello World'
    };
  }

  render() {
    return <ChildComponent />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  static contextTypes = {
    data: PropTypes.string
  };

  render() {
    return <div>{this.context.data}</div>;
  }
}

上記はよく使われる2つの親子コンポーネントのレンダリング方法です。開発者は具体的な要件に応じて適切な方法を選択することができます。

bannerAds