在两个同级React.js组件之间传递数据

Question

我在页面上有一个组件的两个实例（搜索字段），在它们之间有另一个组件（进行服务器调用的按钮），例如：

ReactDOM.render(

    <table>

    <tbody>

        <tr>

            <td><CardSearch items={ cards } placeholder="Card 1 here" /></td>

            <td><RunOnServer url="py/comparecards" /></td>

            <td><CardSearch items={ cards } placeholder="Card 2 here"/></td>

        </tr>

    </tbody>

    </table>,

    document.getElementById('root')

);

我要做的只是将一个未修改的参数从CardSearch字段传递到RunOnServer按钮，但是如果简单的话，我该死的。据此，我可以使用this.state.var作为道具，但是这样做可以在编译代码时给我’undefined.state.var’。React的官方文档并不出色。他们只是告诉我自己动手使用Flux，这似乎很愚蠢……我不需要全新的架构将简单的变量从一个组件传递到另一个组件。

我还尝试在正在执行渲染的文件中制作局部变量，但它们会作为props传递给组件，并且您不能在组件中修改props。

Answer 1

我创建了一个jsfiddle，其中包含有关如何使用父组件在两个组件之间共享变量的示例。

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {shared_var: "init"};
    }

    updateShared(shared_value) {
        this.setState({shared_var: shared_value});
    }

    render() {
        return (
            <div>
                <CardSearch shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <RunOnServer shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <div> The shared value is {this.state.shared_var} </div>
            </div>
        );
    }
}

class CardSearch extends React.Component {
    updateShared() {
        this.props.updateShared('card');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'card' ? {backgroundColor: "green"} : null} >
            card
            </button>
        );
    }
}

class RunOnServer extends React.Component {
    updateShared() {
        this.props.updateShared('run');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'run' ? {backgroundColor: "green"} : null}>
            run
            </button>
        );
    }
}


ReactDOM.render(
  <Parent/>,
  document.getElementById('container')
);