1. /
  2. /
  3. はじめてのReact #16「Componentの連携」子要素にアクセスする
     
  •   

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2019年1月12日 に書かれたものです
「はじめてのReact」一覧に戻る

これまでは、最終的に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タグの概念が脳内にある状態で見ると混乱しますねｗ
ここでは

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

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

「はじめてのReact」一覧に戻る

書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

posted with amazlet at 18.12.24
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067
Amazon.co.jpで詳細を見る

参考ページ

Composition vs Inheritance – React
https://reactjs.org/docs/composition-vs-inheritance.html
A JavaScript library for building user interfaces
reactjs.org

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal（ペイパル）
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

関連した記事

同じカテゴリの記事