从父母调用子方法

我有两个组件。

  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组件位于两个不同的文件中

你可以使用参考 。

 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> 

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

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

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

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

 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应该已经分配。