从父母调用React组件方法

Question

即时通讯新的反应，我想知道如何我可以从父级调用子组件方法？

例如

var ChildClass = class Child { 

    howDoICallThis() { 
    console.log('Called!') 
    } 

    render() { 
    return (<Text> Child Class </Text>) 
    } 
} 

var ParentClass = class Parent { 
    // how can i call child.howDoICallThis() ? 
    render() { 
    return (<ChildClass> </ChildClass>) 
    } 
} 

有人能解释清楚我是如何做到这一点？

Answer 1

这不是真的应该如何在React中完成。处理这些情况的一种常见方式是在处理业务逻辑的容器组件中定义方法，然后将这些方法作为道具传递给表示组件。

class Child extends Component { 
    render() { 
     return <Text onClick={this.props.handleClick}>Child Class</Text> 
    } 
} 

class Parent extends Component { 
    handleClick =() => { 
     console.log('Called!') 
    } 

    render() { 
     return <Child handleClick={this.handleClick} /> 
    }  
} 

基本上，你想传递的东西了，其中反应的目的是通过事物下来。你仍然可以使用refs和'提升状态'（参见https://facebook.github.io/react/docs/lifting-state-up.html）来传递信息，但是就方法而言，你应该永远只传递它们。如果你正确地构建你的组件，你不应该永远不需要从父节点调用孩子的方法。

（顺便说一句...确保要扩展组件。您在你错过了此示例代码）