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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想要做的就是将每个未经修改的参数从CardSearch字段传递给RunOnServer按钮，但如果它很容易，我会被诅咒。 According to this我可以使用this.state.var作为道具，但这样做会给我带来'undefined.state.var＆＃39;当编译代码时。 React's official docs不是很好;他们只是告诉我自己去Flux，这看起来很糟糕......我不需要一个全新的架构来将一个简单的变量从一个组件传递到另一个组件。

我还尝试在进行渲染的文件中创建局部变量，但是它们作为道具传递给组件，并且您无法修改组件中的道具。

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

Answer 2

截至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)
//...
//...

在this上查看The Net Ninja的Hooks & Context API视频教程

祝你好运...

Answer 3

在同级组件之间传递道具的方式更轻巧。 short video对代码进行了解释。

import React, { Component } from 'react';
import ChildOne from './ChildOne';
import ChildTwo from './ChildTwo';

export default class Parent extends Component {
    state = {
        isMapVisible: false,
    }
    toggleMap = () => {
        this.setState({isMapVisible: !this.state.isMapVisible})
    }

    render() {
        return (
            <div className="parent__container">
                <ChildOne toggleMap={this.toggleMap} />
                <ChildTwo isMapVisible={this.state.isMapVisible} />
            </div>
        )
    }
}