回调函数

Question

任何想法，如果有一个干净的解决方案＆＃34; paradoxon＆＃34;？

class Container extends Component {
    render() {
        <Parent> // ---------v
            <Child parent={Parent} /> // Reference to "Parent"
        </Parent>
    }
}

问题当然是<Child>在 <Parent>之前呈现。

最终，目标是能够从<Parent>内调用<Child>的实例方法。

我已经尝试过诸如(ref)，回调函数（getParentReference()）之类的解决方法，通过使用cloneElement()甚至this._reactInternalInstance将其添加为新的道具来传递引用，但是它们似乎都没有用（除了非常黑客）。

Answer 1

您应该考虑使用回调函数。

回调函数

父母会将一个函数作为道具传递给孩子，如下所示：

<MyChild myFunc={this.handleChildFunc.bind(this)} />

孩子会这样称呼这个函数：

this.props.myFunc();

不要忘记，孩子需要在propTypes中声明这个函数：

MyChild.propTypes = {
  myFunc: React.PropTypes.func,
};

有关详情，请参阅8 no-Flux strategies for React component communication

子访问父组件

1 个答案:

回调函数