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

Question

我的结构是这样的：

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

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

我该如何实现？据我所知，refs 只能上树 "step"，不能下树。

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

Answer 1

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

方法 2：

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

Answer 2

如果您的结构如下所示：

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

Child1 和 Child2 都应该 "communicate" 到 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 将使用新值重新渲染为 prop

Answer 3

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

例如

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

您可以在子组件中从 this.props 访问 gridControl 和 onClick

更新

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

假设父组件是这样的：

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 组件中的功能的道具来处理它们，那么您可以使用新的 componentWillReceiveProps 方法更新状态从父组件接收的道具，以便发送的道具将匹配 Child1 组件中使用的状态。

希望这会解决问题。

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

React - How do I access a function in another component?

refs

reactjs