これまでは、最終的にrender()する際には
ダイアログ 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タグの概念が脳内にある状態で見ると混乱しますねｗ ここでは
- JSXはXMLである
- left(right)属性にはComponentのオブジェクトが渡る
といった感じで理解すると良いのではないでしょうか。
書籍
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
posted with amazlet at 18.12.24
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067
翔泳社
売り上げランキング: 139,067
