React.js pass data between components flow

问题

I have created three basic components.

A renders both the components B and C B is like header containg tabs 1,2,3 C is the first page on which there are two forms, one shows at a time. On showing first form i need to show tab one 1 in B component. On showing second form i need to show tab 3 in B component.

I just want to pass the data from C component on the basis of which form is showing to B component.

I put state on C component and tried to use same this.state.data or this.props.data for no value coming in B controller.

A.jsx

import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            <div>{this.props.show}
                <B />
                <C/>
            </div>
        )
    }
}

export default A;

B.jsx

import React from 'react';

class B extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}

C.jsx

class C extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}

回答1:

You will need to add your state to parent component here it would be A component then pass a function to change your states to B and C to change your state on A like below

class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        };
    }
    changeShow(show){
        this.setState({show: show});
    }
    render() {
        return (
            <div>{this.props.show}
                <B show={this.state.show}/>
                <C handleChangeShow={this.changeShow.bind(this)} show={this.state.show}/>
            </div>
        )
    }
}

Now you have access to show state in your child components and can change it from them for example in C

class C extends React.Component {
    handleChange({target}){
        this.props.handleChangeShow(target.value)
    }
    render() {
        return (
           <select onChange={this.handleChange.bind(this)}>
                <option value="0">hide</option>
                <option value="1">show</option>
           </select>
        )
    }
}

Now you have access to show state in B

class B extends React.Component {

    render() {
        return (
           {this.props.show}
        )
    }
}

It wasn't clear enough what were you trying to do in your example so I tried to give a example how to pass state between child component in a general sense. I hope it would be useful enough

回答2:

I tried to create the same scenario that u described, check the jsfiddle for working example.

jsfiddle : https://jsfiddle.net/mj8rsawh/

please comment on this if you want any other help.

来源：https://stackoverflow.com/questions/41676254/react-js-pass-data-between-components-flow