Question

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

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

使用它时，似乎不可能：

<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

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

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

});

您还可以查看双向绑定：

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

虽然这种沟通将逐个1对1，每个孩子都是父母。

Answer 2

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;

ReactJS - 访问儿童的方法（不使用refs）

2 个答案: