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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

ダイアログ 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>
- Sponsored Link -

実行結果

解説

子要素には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

参考ページ

[blogcard url=”https://reactjs.org/docs/composition-vs-inheritance.html”%5D

- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください