質問編集履歴

2 修正

退会済みユーザー

退会済みユーザー

2018/03/14 19:03  投稿

子のcomponentから親のstateを更新させた後に子が持ってるpropsを更新させたい
ある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>
       <button onClick={() => {this.buttonClick();}}>ボタン</button>
     </div>
   );
 }
}
component2.propTypes = propTypes;
export default component2;
```
  • React.js

    3093 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1 コードの追加

退会済みユーザー

退会済みユーザー

2018/03/14 18:53  投稿

あるcomponentでcomponentWillUpdate()をし、
state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
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;
```
  • React.js

    3093 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る