質問編集履歴

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ライブラリです。 Myタグに追加

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ライブラリです。 Myタグに追加