ReactJS：访问组件“父”内的组件答案

【问题标题】：ReactJS: access components inside component "parent"ReactJS：访问组件“父”内的组件
【发布时间】：2015-08-28 12:11:11
【问题描述】：

如何访问在父组件中创建的 React 组件？

示例，使用以下代码：

var Widget = React.createClass({

    render: function() {

        return <div>{ this.props.widget_id }</div>
    }
});

var Column = React.createClass({

    onBtnClick: function() {
        console.log(this);
        //
    },
    render: function() {
        var widgets = [];
        for(var i=0; i<3; i++) {
            widgets.push(<Widget key={i} widget_id={i} />);
        }
        console.log(widgets);
        return <div>
            <button onClick={this.onBtnClick}>click me</button>
            {widgets}</div>;
    }
});

React.render(<Column />, document.getElementById('container'));

console.log(小部件);给我这个，创建的 3 个小部件：

[ReactElement, ReactElement, ReactElement]

在 onBtnClick 函数中，我如何访问它们？如果我在函数内部检查“this”，则 props 和 refs 数组都是 null ([]);

这是一个小提琴：https://jsfiddle.net/chrisbenseler/m8x9f65o/1/

【问题讨论】：

在onBtnClick() 内，this 指的是Column 组件，并且由于您没有向它传递任何道具（<Column />），所以this.props 是一个空数组。
@julen 这对我来说很有意义。但是有没有办法访问这个小部件数组？ Column（组件）是否有对其的引用？

标签： javascript reactjs

【解决方案1】：

将ref标签添加到孩子，像这样（我只是添加了“小部件”以使示例更深入，但它必须是唯一的）

widgets.push(<Widget key={i} ref={"widget"+i} widget_id={i} />);

然后你的父母使用this.refs 访问组件，就像这样

var secondWidget = this.refs.widget1;

您可以在此处阅读更多关于参考的信息https://facebook.github.io/react/docs/more-about-refs.html

【讨论】：

谢谢！我错过了这一点（为每个组件设置一个唯一的 ref）！

【解决方案2】：

使用作为道具传递的父母处理程序来处理子组件中的点击。我将 widget_id 更改为 id 因为我知道 event.target 引用了 id。其他属性没试过。

    var Widget = React.createClass({

            render: function() {

                    return <div onClick={this.props.onBtnClick}>{ this.props.id }</div>
            }
    });

    var Column = React.createClass({

            onBtnClick: function(ev) {
                    console.log(ev.target.id);
                    //
            },
            render: function() {
                    var widgets = [];
                    for(var i=0; i<3; i++) {
                            widgets.push(<Widget key={i} id={i}  onBtnClick={this.onBtnClick} />);
                    }
                    console.log(widgets);
                    return <div>
                            <button>click me</button>
                            {widgets}</div>;
            }
    });

    React.render(<Column />, document.getElementById('container'));

【讨论】：