在两个兄弟 React.js 组件之间传递数据

IT技术 javascript reactjs
2021-04-16 18:32:42

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

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我可以使用this.state.var作为props，但是当代码编译时，这样做给了我'undefined.state.var'。React 的官方文档不是很好；他们只是告诉我自己去使用 Flux，这似乎很愚蠢……我不需要一个全新的架构来将一个简单的变量从一个组件传递到另一个组件。

我还尝试在进行渲染的文件中制作本地变量，但它们作为props传递给组件，并且您无法修改组件中的props。

2个回答

我创建了一个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')
);
谢谢，解决了。我创建了两个 updateShared 函数，一个用于我拥有的每个 CardSearch 组件，它们分别更新 var1 或 var2。一个技巧是，我在 this.setState({string: var}) 之后立即调用 this.props.updateShared(this.state.var)，但是传入的 var 是旧的，而不是我正在设置的更新的状态与。所以我通过 this.props.updateShared(var) 作为 this.setState 的回调。不知道为什么在 setState 调用后它没有更新状态值...
2021-05-23 18:32:42
我很想看到用 ES6 类而不是 React.createClass 重写这个答案。这只是稍微分散注意力。好吧，我想我可以自己做。
2021-06-16 18:32:42

截至 2020 年 2 月；Context API是处理这个的方法：

// First you need to create the TodoContext


// Todo.jsx
//...
export default () => {
  return(
    <>
      <TodoContextProvider>
        <TodoList />
        <TodoCalendar />
      </TodoContextProvider>
    </>
  )
}

// Now in your TodoList.jsx and TodoCalendar.jsx; you can access the TodoContext with:
//...
const todoContext = React.useContext(TodoContext);
console.log(todoContext)
//...
//...

检查这个由视频教程网忍者的挂钩和上下文API

祝你好运...

“挂钩和上下文 API”链接reactjs.org/docs/hooks-reference.html6Y8uFbD3XRlZmz9已损坏。请更新。谢谢。
2021-06-08 18:32:42
其它你可能感兴趣的问题
上一篇点击 react.js 传递 id 下一篇在 .map 函数中使用 react props