This.props.childrenと反応して構成コンポーネントを作成する

Reactを初めて使用する場合は、さまざまなチュートリアルでthis.props.childrenを見たことがあるかもしれません。その目的が明確でない場合や、「別の方法で行うことができた」と思われる場合があります。 Reactでchildrenを使用することのユニークな特典を見つけて、いつ使用すべきかについてより自信を持って感じられるようにしましょう。

基本的な使用法

アプリ内のすべての召喚ボタン用に<PrimaryButton/>コンポーネントを作成する必要があると想像してください。

class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton text="Getting Started" onClick={this.somehandler} />

デザインチームは、「はじめに」という言葉の前にアイコンを含めるという小さな機能を追加したいと考えています。ここで物事が面白くなります…

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
    )
  }
}

//usage
<PrimaryButton
  icon={IconFile}
  text="Getting Started"
  onClick={this.somehandler}
/>

このソリューションは確かに合理的ですが、ボタンの内容を明示する必要があるため、は<PrimaryButton/>との緊密なインターフェイスを作成します。これにより、新しい機能を導入する必要があるときに簡単に破損する脆弱なコンポーネントが発生する可能性があります。しかし、ああ！より堅牢なソリューションがあります！

//refactor
class PrimaryButton extends React.Component {
  render() {
    return (
      <!--
      <button onClick={this.props.onClick}>
        {this.props.icon}{this.props.text}
      </button>
      -->
      <button onClick={this.props.onClick}>
        {this.props.children}
      </button>
    )
  }
}

//usage
<PrimaryButton onClick={this.somehandler}>
  <IconFile/> Getting Started
</PrimaryButton>

ピニオン化されていない<PrimaryButton/>の内容に注目してください。そこに有効なHTMLタグ、画像ファイル、Reactコンポーネントなどを配置できます。たとえば、テキストとアイコンの順序を逆にすることもできます。

しかし、この奇妙なthis.props.childrenは何ですか？

this.props.weird

私が最初にReactを使い始めたとき、this.props.childrenを採用することへの最大の抑止力の1つは、それが使用された奇妙な方法のためでした。 Reactコンポーネントを他のReactコンポーネントの周りにラップしますか？これらすべてのコンポーネントが暗黙的に親に渡されると仮定しますか？ propsで予約された名前空間を使用して…「子供」にアクセスしますか？超奇妙。

しかし、JSXが最初にどれほど奇妙であったかと同じように、this.props.childrenをさらに使用して練習し、構文に慣れると、JSXと同じくらい不可欠になります。親子関係を使用する場所を特定することは、あなたにとってより直感的になります。

children は、 onClick onChange keyやstyleなどの属性を介して渡されない唯一の小道具です。むしろ、Reactコンポーネント（「親」コンポーネントと見なされます）でラップすると、暗黙的に渡されます。「親」と「子」の言語は、親と子のDOMノードがあるHTMLからのものです。

まとめ

現実の世界では、Reactアプリには、これらのラッパーコンポーネント（より洗練されたReactコンポーネントをより単純なコンポーネントから構成するため、Reactチームはそれらを構成コンポーネントと呼びます）と、そうでないコンポーネントがブレンドされます。 tすべてのReactコンポーネントをラップします（私の最初のコードスニペットを参照してください）。それは完全に正常です。製品について詳しく知ると、構成コンポーネントに変換できる冗長なUI/UXを特定できるようになります。

たとえば、コンポジションコンポーネントにリファクタリングするのに適した候補には、モーダル、ホバリング/クリックスタイリング、通知スナックバー、デッキスライダーなどがあります。この構成スタイルを厳密にするか緩めるかは、実際にはあなたの裁量に任されています。 Reactコンポーネントがその中の任意のコンテンツと、アプリ全体で使用されるUI機能の一般的な分母に依存するほど、この親子パターンを使用することでより多くのメリットが得られます。

👉Codepenのデモをチェックしてください。さまざまな構成コンポーネントを使用して、高度な機能が段階的に階層化されていることに注目してください。