はじめてのReact #16「Componentの連携」子要素にアクセスする

これまでは、最終的にrender()する際にはのようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んでHello!のように何らかの要素を挟んでみたいと思います。

ダイアログ Component

おもしろサンプルが思いつかなかったので、公式ドキュメントほぼそのまま、ダイアログの作成を行います。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Dialog</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div style={{backgroundColor:'lightpink', width:'500px', border:'5px solid red'}}>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <Dialog>
    <h1>Hello! World</h1>
    nice to meet you!
  </Dialog>,
  document.getElementById('root')
);
</script>
</body>
</html>

実行結果

解説

子要素にはPropsからアクセスできる

一目瞭然なので特に解説しなくても大丈夫かと思いますが、Componentが内包する子要素にアクセスしたい場合は以下のようにthis.props.childrenを参照するだけです。

  render() {
    return (
      <div style={{backgroundColor:'lightpink', width:'500px', border:'5px solid red'}}>
        {this.props.children}
      </div>
    );
  }

これまで通り属性じゃダメなの?というと、それで解決する要件であれば問題ないかと思います。 小要素にした際にはより複雑なデータや、Component自体を渡すことができるという点にあります。

属性にComponentを指定できる?

以下は公式ドキュメントの内容そのままですが、属性に対してComponentを指定することも可能なようです。以下は左側にコンタクトリスト、右側にチャット画面を並べて表示したい場合のサンプル。

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

HTMLタグの概念が脳内にある状態で見ると混乱しますねw ここでは

  • JSXはXMLである
  • left(right)属性にはComponentのオブジェクトが渡る

といった感じで理解すると良いのではないでしょうか。

書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067

参考ページ

reactjs.org