コード
親コンポーネント
import React from 'react'; import PropTypes from 'prop-types'; import Component from './Component'; class test extends React.Component { static propTypes = { }; constructor(props) { super(props); this.state = { array: [ { class: 'first', length: 1}, { class: 'second', length: 2}, { class: 'third', length: 3} ], }; } aaa(obj) { return ( <Component choice={obj} /> ); } render() { const aaa = this.state.array.map((e) => { return ( this.aaa(e) ); }); return ( <div> {aaa} </div> ); } }
子コンポーネント
import React from 'react'; import PropTypes from 'prop-types'; class Component extends React.Component { constructor(props) { super(props); this.state = { bool: false }; } render() { if (this.state.bool) { return ( <div>なんかある</div> ); } else { return ( <div>なんもない</div> ); } } }
#現状
上記のようなコードを今書いているのですが、
親コンポーネントのstateを子のコンポーネントに渡す時に
stateをmapで回して、子のコンポーネントに渡すようにしています。
なので上記のコードを実行すると
「なんもない」という文字がブラウザ上に3つ表示されます。(子のコンポーネントが3つ作られている)
やりたいこと
この場合、
一番最初のアクセス時に
一つの目のコンポーネントのthis.state.boolをtrueにしたい場合どうすればいいですか?
#やってみたこと
componentWillMountの中でconsole.log('ほにゃらら');とかを実行しても3個分出るだけだった。
解決したのであれば質問を閉じて下さい。解決していないのであれば質問内容を修正し、より質問内容を明確にするなりした下さい。
回答1件
あなたの回答
tips
プレビュー