从this.props.children数组运行组件子的方法

Question

import React from "react";
import ReactDOM from "react-dom";
class NestedComponent extends React.Component {
    constructor(props) {
        super(props);
        this.childMethod = this.childMethod.bind(this);
    }
    childMethod() {
        alert("Child method one ran");
    }
    render() {
        return <div>NestedComponent</div>;
    }
}
class NestedComponentTwo extends React.Component {
    constructor(props) {
        super(props);
        this.childMethod = this.childMethod.bind(this);
    }
    childMethod() {
        alert("Child method two ran");
    }
    render() {
        return <div>NestedComponentTwo</div>;
    }
}

class WrappingComponent extends React.Component {
    constructor(props) {
        super(props);
        this.runMethod = this.runMethod.bind(this);
    }
    runMethod() {
        let child = this.props.children[0];
        /** Always returns as undefined */
        //if (typeof child.childMethod == "function") {
        //    child.childMethod();
        //}
        /**
         * EDIT: Close, however the this binding seems to not be working. I can however provide the childs props to the childMethod and work with that. 
         */
        if(typeof child.type.prototype.childMethod == "funciton"){
            child.type.prototype.childMethod();
        }

    }
    render() {
        return (
            <div>
                {this.props.children}
                <button onClick={this.runMethod}>run</button>
            </div>
        );
    }
}

const App = ({}) => {
    return (
        <div>
            <WrappingComponent>
                <NestedComponent />
                <NestedComponentTwo />
            </WrappingComponent>
        </div>
    );
};

if (document.getElementById("example")) {
    ReactDOM.render(<App />, document.getElementById("example"));
}

因此，目标是将可选方法附加到可以从包装组件执行的嵌套组件，几乎就像事件发送器一样。但是出于某种原因，子组件上存在的方法声称不存在。但是，每当我记录从this.props.children数组中提取的子组件时，原型都会列出该方法。

我是否错过了通过方法变量访问子组件方法的特殊方法？

Answer 1

找到了我可以用来访问它的变量。如果有人对此有任何了解，或者我正在做的事情是不良做法的原因，请告诉我。

编辑需要的问题，但下面的项目是访问孩子的功能：

child.type.prototype.childMethod

似乎没有保持this绑定。然而，传递道具确实有效。

Answer 2

您应该在顶级组件（App组件）中管理所有这些逻辑

class NestedComponent extends React.Component {
    constructor(props) {
        super(props);
        this.childMethod = this.childMethod.bind(this);
    }
    childMethod() {
        alert("Child method one ran");
    }
    render() {
        return <div>NestedComponent</div>;
    }
}

class NestedComponentTwo extends React.Component {
    constructor(props) {
        super(props);
        this.childMethod = this.childMethod.bind(this);
    }
    childMethod() {
        alert("Child method two ran");
    }
    render() {
        return <div>NestedComponentTwo</div>;
    }
}

class WrappingComponent extends React.Component {
    render() {
        return (
            <div>
                {this.props.children}
                <button onClick={this.props.onClick}>run</button>
            </div>
        );
    }
}

class App extends React.Component {
    
    constructor(props) {
      super(props);
      this.runMethod = this.runMethod.bind(this);
    }
    
    runMethod() {
      if (this.nestedComponent) {
        this.nestedComponent.childMethod();
      }
    }

    render() { 
      return (
        <div>
            <WrappingComponent onClick={this.runMethod}>
                <NestedComponent ref={el => this.nestedComponent = el} />
                <NestedComponentTwo />
            </WrappingComponent>
        </div>
      );
    }
};

if (document.getElementById("example")) {
    ReactDOM.render(<App />, document.getElementById("example"));
}

<script src="https://cdnjs.cloudflare.com/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="example"></div>

此外ref与字符串属性已弃用https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs