reactでcomponentの引数を渡す

reactでcomponentの引数を渡したい時があると思いますので、そのサンプルを書きます。

Counterという関数。propsを受け取り、そのcolorを書きます。｛props.color｝

function Counter(props){
		return <div>0 {props.color}</div>
	}

渡す方です。

<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,

繋げてみます。

(() => {

		function Counter(props){
		return <div>0 {props.color}</div>
	}

		ReactDOM.render(
		<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,
			document.getElementById('root')
		);
	})();

うまく引き継がれました。

それをdivタグのsytleの属性に渡します。
backgroundColor:props.colorとすることで、props.colorを背景色に指定しています。

function Counter(props){
		return <div style={{backgroundColor:props.color}}>0</div>
	}