Reactで子にComponentを渡す・子のComponentを指定する
https://gyazo.com/5c1023fd0617d490366fbc7d50b61677
React Element や Componentも、ふつうにpropsとして渡すことが可能
Element? Component?
自分のなかではこういう理解
React Component: 引数などを受け取るやつ（つまり関数の役割）
React Element: 表示上の最小単位（つまり定数）
なのでReact ComponentがReact Elementを吐く
天才が考えたとしか思えない
コンポーネント定義
まずコンポーネントを作る。
code:jsx
import React from 'react';
const Hello = ({name, icon}) => (
<div>Hello {name} {icon}</div>
);
const Icon = () => (
);
コンポーネントの作り方
コンポーネントはいろんな記法で作れる。
イマドキはきっと↑の例みたく、 const + arrow functionで書くのがいいんじゃない感
JSXとReact Component
※ JSXはXMLであり、JSXで書くコンポーネント要素は React.createElement のシンタックスシュガーになっている
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).
JSXで書く
<Hello toWhat="World" />
のようなコンポーネント呼び出しは、pure JSにおける
React.createElement(Hello, {toWhat: 'World'}, null)
と同じ。
子にReact Componentを渡す
HelloにIconコンポーネント（が実行されるReact Element）を渡すことができる
code:jsx
ReactDOM.render(
<Hello name="namaozi" icon={<Icon someProps="hoge" />}></Hello>,
document.getElementById('container')
);
子のComponentを動的に指定させる
ある程度はできる
※いちばんうえに書いてあるようにJSXでコンポーネント名を指定するのは無理ぽいので、ちゃんとコンポーネントをclassで書く（classで書かなくてもFunctionで書くことは可能）
あとこういう書き方はあまりお行儀がよろしくないらしい
code:jsx
class DynamicComponent extends Component {
// コンポーネントのマッピングを持つ必要がある
// ので完全にダイナミックには呼べない
components = {
foo: FooComponent,
bar: BarComponent
};
render() {
return <TagName />
}
}
class App extends Component {
render() {
return (
<div>
<MyComponent tag="foo" />
<MyComponent tag="bar" />
</div>
);
}
}
![https://lh6.googleusercontent.com/-ABoMRX25CeM/AAAAAAAAAAI/AAAAAAAAZnI/T_V1b0N2FoA/photo.jpg"](https://lh6.googleusercontent.com/-ABoMRX25CeM/AAAAAAAAAAI/AAAAAAAAZnI/T_V1b0N2FoA/photo.jpg"){kind=link}