Question

我的结构是这样的：

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

我在<Child 1 />中有一个功能。由于<Child 1 />控制了网格布局，<Child 2 />是一个带按钮的导航栏，我想在<Child 2 />中设置一个按钮，它会重置<Child 1 />中的一些参数。

我如何实现这一目标？据我所知，refs只能在树上“向上”一步，而不是向下。

没有任何明显的方法可以从parent组件调用此函数。这有什么办法吗？我能想到的所有解决方案都不是真正遵循React-mindset，即单向数据流。

Answer 1

您可以将父组件作为两个组件的容器。因此，所有状态和函数都在父组件中处理，并作为props传递给其他组件。

e.g。

    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>
             )
         }
    }

您可以从子组件中的gridControl访问onClick和this.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使用状态，并且不想将它们更改为具有Parent组件中的函数的props以处理它们，那么您将使用收到的新道具更新componentWillReceiveProps方法中的状态从父组件，以便发送的道具将匹配Child1组件中使用的状态。

希望这会让事情变得清晰起来。

Answer 2

如果您的结构如下所示：

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

Child1和Child2都应通过ParentComponent“沟通” 如果Child2会通知ParentComponent有关按钮点击事件，那么它可以相应地使用适当的道具重新呈现Child1，或者触发Child1作为prop获取的功能}。这是react.js

中的基本流程

作为示例，请考虑具有House和Button子组件的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将使用新值作为道具重新呈现

Answer 3

方法1： 为此，您需要维护一个商店。在<Child2 />组件中单击按钮时，更新商店中的变量。阅读商店中更新的变量，以及<Child1 />组件中是否有更新更新值。您可以使用flux，redux，mobx等作为商店选择，但我会说你可以从redux开始。

<强>方法2：

如果您不想使用商店，请在<Parent />中点击状态，然后点击<Child2 />按钮，通过回调功能更新您父母的状态。将此状态值作为道具传递给<Child1 />，并在道具存在时进行更改。

React - 如何访问另一个组件中的函数？

3 个答案: