javascript - 在两个同级 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 按钮每个传递一个未修改的参数，但如果这很容易，我会被诅咒的。 According to this我可以使用 this.state.var 作为 Prop ，但是这样做会在代码编译时给了我“undefined.state.var”。 React's official docs不是很好；他们只是告诉我自己去使用 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')
);