在两个同级React.js组件之间传递数据 [英] Passing data between two sibling React.js components

问题描述

我在页面上有一个组件的两个实例(搜索字段)，在它们之间有第二个组件(进行服务器调用的按钮)，例如:

I have two instances of a component (a search field) on a page, with a second component (a button that makes server calls) between them, as such:

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，这似乎很愚蠢……我不需要全新的体系结构将简单的变量从一个组件传递到另一个组件.

All I want to do is pass one parameter each, unmodified, from the CardSearch fields to the RunOnServer button, but I'll be damned if it's easy. According to this I can use this.state.var as a prop, but doing that gave me 'undefined.state.var' when the code compiled instead. React's official docs are not great; they simply tell me to go Flux myself, which seems daft... I shouldn't need a whole new architecture to pass a simple variable from one component to another.

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

I also tried making local vars in the file that's doing the rendering, but they get passed to the components as props and you can't modify props in a component.

推荐答案

我创建了 jsfiddle 一个如何使用父组件在两个组件之间共享变量的示例.

I created a jsfiddle with an example of how to share a variable between two components using a parent component.

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')
);

这篇关于在两个同级React.js组件之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！