ReactJS - 访问子项的方法（不使用 refs）

Question

我正在尝试访问父组件中子组件的方法。

首先我想使用 refs 而不是 this.props.children，但是只有在我的组件中使用它们时才能访问 refs。

用这个的时候，好像不行：

<Parent>
   <Child ref="testChild" />
</Parent>

在我的父组件中，我无法访问 this.refs.testChild - 因此我必须使用 this.props.children 访问此组件。

但是：当使用this.props.children 访问它们时，我无法调用孩子的方法。

例子：

// Child.jsx

{
  customMethod() {},
  render() {... some stuff ...}
}

// Parent.jsx

{
   callChildrenMethods() {
       this.props.children.map((child)=>{
           console.log(child.props); // Props Object
           console.log(child.customMethod); // Undefined
       });
   },
   render() {return(<div>{this.props.children}</div>)}
}

如您所见：customMethod 未定义。有什么简单的方法可以访问这些方法吗？更好的方法是使用refs 访问孩子，但在我的情况下这是不可能的。

Answer 1

this.props.children 是不透明的，您应该使用React.Children API 进行迭代。无论如何，这是一个使用一些hackery来调用子方法的小提琴 - https://jsfiddle.net/sukantgujar/4bffu7tw/3/ 基本上你需要访问指向被包装组件实例的子类型对象。

var child = React.Children.only(this.props.children),
childType = child.type,
childProto = child.type.prototype,
childName = childProto.constructor.displayName,
childMethod = childProto.someMethod;

Answer 2

你应该通过道具让孩子知道：

var Child = React.createClass({
    render: function() {

        if(this.props.shouldRunChildrensMethod) {
            this.childsMethod();
        }

        return (...);
    }
});

var Parent = React.createClass({

    getInitialState: function() {
        return {
            shouldRunChildrensMethod: false
        }
    },

    callChildrenMethods: function() {

        this.setState({
            shouldRunChildrensMethod: true
        });
    },

    render: function() {
        return (
            <Child shouldRunChildrensMethod={this.state.shouldRunChildrensMethod} />
        );
    }

});

您还可以查看2路绑定：

https://facebook.github.io/react/tips/communicate-between-components.html

虽然这种沟通将是一对一地与每个孩子与父母单独进行的。