あるcomponentでcomponentWillUpdate()をし、
state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
コード
親component
import React from 'react'; import PropTypes from 'prop-types'; import component1 from './component1'; import component2 from './component2'; class parent extends React.Component { constructor(props) { super(props); this.state = { array: [ { test: 'test1', test1: false, index: 0}, { test: 'test2', test1: false, index: 1}, { test: 'test3', test1: false, index: 2}, ], }; } onSubmitState() { this.setState({ array: [ { test: 'aaa', test1: true, index: 0}, { test: 'bbb', test1: true, index: 1}, { test: 'ccc', test1: true, index: 2}, ], }); } cmp1Props(obj) { return ( <component1 cmp1Props={obj} /> ); } cmp2Props(obj) { return ( <component2 cmp2Props={obj}, onSubmitState={() => {this.onSubmitState();}} /> ); } render() { const cmp1 = this.state.array.map((e) => { return ( this.cmp1Props(e) ); }); const cmp2 = this.state.array.map((e) => { return ( this.cmp2Props(e) ); }); return ( <div> {cmp1} {cmp2} </div> ); } } export default parent;
component1(子)
import React from 'react'; import PropTypes from 'prop-types'; class component1 extends React.Component { static propTypes = { cmp1Props: PropTypes.object, }; constructor(props) { super(props); this.state = { test: this.props.cmp1Props.test, test1: this.props.cmp1Props.test1, }; } render() { if(this.state.test1) { return( <div> <p>成功</p> </div> ); } else { return( <div> <p>失敗</p> </div> ); } } } export default component1;
component2(子)
import React from 'react'; import PropTypes from 'prop-types'; const propTypes = { cmp2Props: PropTypes.object, onSubmitState: PropTypes.func }; class component2 extends React.Component { constructor(props) { super(props); this.state = { index: this.props.cmp2Props.index, }; } buttonClick() { return this.props.onSubmitState(); } render() { return( <div> <button onClick={() => {this.buttonClick();}}>ボタン</button> </div> ); } } component2.propTypes = propTypes; export default component2;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。