2

My structure is as such:

       <ParentComponent />
 <Child 1 />     <Child 2 />

I have a function in <Child 1 />. Since <Child 1 /> controls the grid-layout, and <Child 2 /> is a Navbar with buttons, I want to have a button in <Child 2 /> which will reset some parameters in <Child 1 />.

How do I achieve this? As far as I can see, refs will only be able to go one "step" up the tree, not down.

There isn't any obvious way this function can be invoked from the parent component. Is there any way here? All the solutions I can think of aren't really following the React-mindset, namely the unidirectional data-flow.

4

3 回答 3

5

您可以将父组件作为两个组件的容器。所以所有的状态和功能都在父组件中处理，并将它们作为道具传递给其他组件。

例如

    class Parent extends React.Component {

         constructor() {
             super();
             this.state = {
                 controls: controls
             }
         }

         onClick = (dataFromChild2) => {
              //Resetting
              this.setState({controls: dataFromChild2})
         }

         render() {
             return (
                 <div>
                      <Child1 gridControl={this.state.controls}/>
                      <Child2 onClick={this.onClick}/>
                 </div>
             )
         }
    }

您可以在子组件中访问gridControland onClickfromthis.props

更新

这样想，您的 Parent 组件具有处理数据所需的状态和功能。子组件获取这些数据并相应地更新它们的状态。

假设父组件是这样的：

class Parent extends React.Component {

  constructor() {
    super();
    this.state = {
      gridControl: {}
    }
  }

  onChild2ButtonClick = (dataFromChild2) => {
    this.setState({
      gridControl: dataFromChild2
    });
  };

  render() {
    return (
      <div>
        <Child1 controls={this.state.gridControl}/>
        <Child2 onClick={this.onChild2ButtonClick}/>
      </div>
    );
  }
}

Child2 组件是这样的：

 class Child2 extends React.Component {
  constructor() {
    super();
  }

  onClick = () => {
    var data = {};
    this.props.onClick(data);
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}/>
      </div>
    );
  }

如果您使用 Child1 的状态，并且不想将它们更改为具有父组件中的功能的道具来处理它们，那么您componentWillReceiveProps使用从父组件接收到的新道具更新方法中的状态，以便发送的道具将匹配 Child1 组件中使用的状态。

希望这能解决问题。

于 2017-04-27T12:30:47.263 回答
1

如果您的结构如下所示：

<ParentComponent>
    <div>
        <Child1 />     
        <Child2 />
    </div>
<ParentComponent />

两者都Child1应该Child2通过ParentComponent.
如果Child2将通知按钮单击事件，则它可以相应地使用适当的道具ParentComponent重新渲染或触发以. 这是一个基本流程Child1Child1propreact.js

例如，考虑一个House具有 aButton和一个Door子组件的组件。将Button切换Door. 

class House extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isOpened: props.isOpened,
        };

        this.toggleOpenDoor = this.toggleOpenDoor.bind(this);
    }

    toggleOpenDoor() {
        this.setState({
            isOpened: !this.state.isOpened
        });
    }

    render() {
        return (
            <div>
                <Button onClick={this.toggleOpenDoor} />
                <Door isOpened={this.state.isOpened} />
            </div >
        );
    }
}

House.propTypes = {
    isOpened: React.PropTypes.bool
};

House.defaultProps = {
    isOpened: true
};

export default House;

在每次更改时this.state.isOpened，Door都会以新值作为道具重新渲染

于 2017-04-27T12:24:00.103 回答
0

方法1： 为此，您需要维护一个商店。单击<Child2 />组件中的按钮时，更新商店中的变量。读取存储中更新的变量，如果它在您的<Child1 />组件中有更改更新值。您可以使用flux、redux、mobx 等作为商店选择，但我想说您可以从redux 开始。

方法2：

如果您不想使用商店，请在您的<Parent />和按钮单击中保持<Child2 />状态，通过回调函数更新您在父项中的状态。将此状态值作为道具传递给<Child1 />并在道具存在时进行更改。

于 2017-04-27T12:16:25.390 回答