从父母调用子方法

我有两个组件。

1. 父组件
2. 子组件

我试图从父母调用孩子的方法，我试过这种方式，但没有得到一个结果

class Parent extends Component { render() { return ( <Child /> <button onClick={Child.getAlert()}>Click</button> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 

有没有办法从父母那里调用孩子的方法？

注：Child和Parent组件位于两个不同的文件中

Answer 1

你可以使用参考 。

 class Parent extends Component { render() { return ( <div> <Child ref="child" /> <button onClick={() => this.refs.child.getAlert()}>Click</button> </div> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1>Hello</h1> ); } } 

在这里示范

---

编辑

String refs可能会在将来被弃用，所以以下是callback引用的方法 ：

 const { Component } = React; const { render } = ReactDOM; class Parent extends Component { render() { return ( <div> <Child ref={instance => { this.child = instance; }} /> <button onClick={() => { this.child.getAlert(); }}>Click</button> </div> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1>Hello</h1> ); } } render( <Parent />, document.getElementById('app') ); 

 <script src="ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

https://facebook.github.io/react/tips/expose-component-functions.html更多的答案ref here React子组件的调用方法

通过查看“原因”组件的参考，您正在破解封装，并且无法仔细检查所使用的所有位置，从而无法重构该组件。 正因为如此，我们强烈build议将参考文献视为一个组件的私有，就像状态一样。

一般来说，数据应该通过道具传递给树。 有一些例外（如调用.focus（）或触发一次性animation，并不真正“改变”状态），但任何时候你暴露一个名为“set”的方法，道具通常是一个更好的select。 尽量做到这一点，以便内部input组件担心它的大小和外观，使其祖先没有一个。

Answer 3

你可以在这里使用另一种模式：

 class Parent extends Component { render() { return ( <div> <Child setClick={click => this.clickChild = click}/> <button onClick={() => this.clickChild()}>Click</button> </div> ); } } class Child extends Component { componentDidMount() { this.props.setClick(this.getAlert) } getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 

它所做的是在安装subprocess时设置父级的clickChild方法。 通过这种方式，当你点击父button时，它会调用clickChild来调用孩子的getAlert。

这也适用于如果你的孩子被包装connect（），所以你不需要getWrappedInstance（）破解。

请注意，您不能在父级中使用onClick = {this.clickChild}，因为当父级呈现时，子级未安装，因此this.clickChild尚未分配。 使用onClick = {（）=> this.clickChild（）}是好的，因为当你点击buttonthis.clickChild应该已经分配。