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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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。

回答：

我创建了一个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')
);

以上是 在两个同级React.js组件之间传递数据 的全部内容， 来源链接： utcz.com/qa/423730.html

回到顶部