Question

如何从Child调用呈现的Parent组件的方法？基本上我的应用程序使用switch语句来呈现3个选项卡，每个选项卡在根目录中包含MyComponent元素。我尝试使用props.children进行访问，但是当我调用子方法时，它会抛出错误。

/* parent */

changeChild(component) {
    this.setState({component});
}

callChildMethod() {
    this.state.component.childMethod();
}

render() {
    return <Child tab={1} changeChild={this.changeChild} />
}

/* child */

componentDidMount() {
    this.props.changeChild(this.refs.root.props.children) // pass to parent here
}

renderContent() {
    switch(this.props.tab) {
        case 0:
            return (
                <MyComponent />
            );
        case 1:
            return (
                <MyComponent />
            );
        case 2:
            return (
                <MyComponent />
            );
    }
}

render() {
    return (
         <div ref="root">
             {this.renderContent()}
         </div>
    )
}

Answer 1

我建议采用不同的方法。不要在州内为孩子保存参考，只需在需要时询问参考。而且通过使用函数作为参考，它不那么多了。

您是否需要在<MyComponent />或带有引用root的div上调用navigator.pop（）？在下面的示例中，您可以访问div或组件。

// parent

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

someMethod() {
  // make sure the component is mounted and you have a referece to child
  if (this.childNode) {
    // get child root node
    const childRootNode = this.childNode.getRootNode()
    // or get the comp node
    const compNode = this.childNode.getCompNode()
  }
}


/* child */
renderContent(setCompRef) {
    switch(this.props.tab) {
        case 0:
            return (
                <MyComponent ref={setCompRef} />
            );
        case 1:
            return (
                <MyComponent2 ref={setCompRef} />
            );
        case 2:
            return (
                <MyComponent3 ref={setCompRef} />
            );
    }
}

render() {
    return (
        <div ref={ref => this.rootNode = ref}>
            {this.renderContent(
              ref => this.compNode = ref // function that sets ref for component
            )}
        </div>
    )
}

// getters for the two refs
getRootNode() {
  return this.rootNode
}
getCompNode() {
  return this.compNode
}

React：在props.children中获取组件

1 个答案: