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

基本上，您希望传递 up ，其中React旨在传递 down 。你仍然可以使用refs来解决问题并提升状态＆＃39; （参见https://facebook.github.io/react/docs/lifting-state-up.html），但就方法而言，你应该真的只传递它们。如果您正确构建组件，则不必从父组件中调用子组件的方法。

（顺便说一下......确保你正在扩展Component。你在示例代码中错过了这个）

从父级调用React组件方法

1 个答案: