ReactJS：訪問組件“父”內部的組件

Question

如何訪問在父組件中創建的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/

Answer 1

像這樣向孩子添加ref標簽（我剛剛添加了“ widget”以使示例更深入，但是它必須是唯一的）

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

然后，您的父this.refs像這樣使用this.refs訪問組件。

var secondWidget = this.refs.widget1;

您可以在這里閱讀有關裁判的更多信息https://facebook.github.io/react/docs/more-about-refs.html

Answer 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'));