Javascript 从this.props.children数组运行组件子级的方法 从“React”导入React； 从“react dom”导入react dom； 类NestedComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.childMethod=this.childMethod.bind（this）； } childMethod（）{ 警报（“子方法一运行”）； } render（）{ 返回嵌套组件； } } 类NestedComponentTwo扩展React.Component{ 建造师（道具）{ 超级（道具）； this.childMethod=this.childMethod.bind（this）； } childMethod（）{ 警报（“子方法二运行”）； } render（）{ 返回嵌套组件2； } } 类包装组件扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.runMethod=this.runMethod.bind（this）； } runMethod（）{ 让child=this.props.children[0]； /**始终以未定义的形式返回*/ //if（typeof child.childMethod==“函数”）{ //child.childMethod（）； //} /** *编辑：关闭，但是这个绑定似乎不起作用。但是我可以为childMethod提供childs道具并使用它。 */ if（typeof child.type.prototype.childMethod==“function”）{ child.type.prototype.childMethod（）； } } render（）{ 返回( {this.props.children} 跑 ); } } 常量App=（{}）=>{ 返回( ); }; if（document.getElementById（“示例”））{ render（，document.getElementById（“示例”）； }

因此，我们的目标是将可选方法附加到一个嵌套组件上，该组件可以从包装组件执行，就像事件管理器一样。但是由于某种原因，子组件上存在的方法声明不存在。但是，每当我记录从

this.props.children

数组中提取的子组件时，原型就会列出方法

---

我是否缺少一种通过methods变量访问子组件方法的特殊方法？

找到了可以用来访问它的变量。如果有人对此有更多的见解，或者我所做的是拙劣实践的原因，请让我知道

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

child.type.prototype.childMethod

---

似乎没有维护此绑定。但是，向下传递道具确实有效。

您应该在顶级组件（应用程序

组件）中管理所有这些逻辑


类NestedComponent扩展React.Component{
建造师（道具）{
超级（道具）；
this.childMethod=this.childMethod.bind（this）；
}
childMethod（）{
警报（“子方法一运行”）；
}
render（）{
返回嵌套组件；
}
}
类NestedComponentTwo扩展React.Component{
建造师（道具）{
超级（道具）；
this.childMethod=this.childMethod.bind（this）；
}
childMethod（）{
警报（“子方法二运行”）；
}
render（）{
返回嵌套组件2；
}
}
类包装组件扩展了React.Component{
render（）{
返回(
{this.props.children}
跑
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.runMethod=this.runMethod.bind（this）；
}
runMethod（）{
if（此.nestedComponent）{
this.nestedComponent.childMethod（）；
}
}
render（）{
返回(
this.nestedComponent=el}/>
);
}
};
if（document.getElementById（“示例”））{
render（，document.getElementById（“示例”）；
}
虽然这在大多数情况下都是个好主意，但我一直在努力使包装组件易于重用。
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"));
}