Question

我有两个组件SideNav和Dashboard（两个在不同的js文件中）。 SideNav将selectbox作为过滤器。我必须将一个数组从Dashboard组件传递给Sidebar组件。此数组必须作为选择框的值（在sidenav组件内）。

P.S。如果我在两个不同的JS文件中定义了两个不同的组件类，那将是什么情况。例如HomeComponent / Home.js - ＆gt;父组件 Dashboard / Dashboard.js - ＆gt;儿童组件我正在对“Home.js”文件进行API调用并获取一些数据。我想将这些数据传递给“Dashboard.js”文件（组件）我研究的所有例子都在同一个JS文件中显示了两个组件。

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state  = {viz:{},filterData:{}};
  }
  var data1= ['1','2','3'];
  this.setState({data1: data1}, function () {
     console.log(this.state.data1);
  });

 }

//Sidebar

class Sidebar extends Component {

   constructor(props) {
     super(props);
     this.state  = {
       data: ['opt1','opt2']
     };
   }

  handleClick(e) {
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
    this.setState({data: this.state.data1}, function () {
      console.log(this.state.data);
    });
  }

  render() {

    const props = this.props;
    const handleClick = this.handleClick;

    return (
      <div className="sidebar">
        <nav className="sidebar-nav">
          <Nav>
            <li className="nav-item nav-dropdown">
              <p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p>
              <ul className="nav-dropdown-items">
              <li> Organization <br/>
               <select className="form-control">
                <option value="">Select </option>
                {this.state.data.map(function (option,key) {
                   return <option key={key}>{option}</option>;
                 })}
               </select>

Answer 1

如果必须将状态从仪表板传递到补充工具栏，则必须从仪表板的渲染功能渲染补充工具栏。在这里，您可以将仪表板的状态传递给补充工具栏。

代码段

class Dashboard extends Component {
...
...
  render(){
    return(
    <Sidebar data={this.state.data1}/>
    );
  }
}

如果您想通过仪表板接收传递给补充工具栏的道具（data1）所做的更改，则需要提升状态。即，您必须将功能参考从仪表板传递到补充工具栏。在补充工具栏中，只要您希望将data1传递回Dashboard，就必须调用它。代码段。

class Dashboard extends Component {
  constructor(props){
    ...
    //following is not required if u are using => functions in ES6.
    this.onData1Changed = this.onData1Changed.bind(this);
  }
  ...
  ...
  onData1Changed(newData1){
    this.setState({data1 : newData1}, ()=>{
      console.log('Data 1 changed by Sidebar');
    })
  }

  render(){
    return(
    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/>
    );
  }
}

class Sidebar extends Component {
  ...
  //whenever data1 change needs to be sent to Dashboard
  //note: data1 is a variable available with the changed data
  this.props.onData1changed(data1);
}

参考文档：https://facebook.github.io/react/docs/lifting-state-up.html

Answer 2

您只能将道具从父组件传递到子组件。重构组件层次结构以具有此依赖性，或使用状态/事件管理系统（如Redux（react-redux））。

Answer 3

我在父组件和子组件上有相同的问题，解决方案只是简单地将函数（正在更改父组件中的状态）发送给子组件。这样，两者都共享该特定变量的状态。希望这种简单的方法对您有所帮助！

Answer 4

我相信使状态值与页面URL保持一致是另一种好方法，不仅可以传递值，而且还可以通过url来控制页面状态。

假设您正在构建一个高级搜索页面，其中不同的组件将控制搜索条件，因此，除了搜索功能之外，用户还应该能够通过使用的URL保留其搜索设置。

假设单击组件x中的链接，则会向当前页面url添加查询字符串条件1 = x，以此类推。假设我们还已经将搜索功能配置为依赖于URL来从中读取状态值，这样，您就可以不受限制地将值从特定组件传递到任意数量的组件。

Reactjs - 将状态值从一个组件传递到另一个组件

4 个答案: