ReactJS:访问组件内部的组件" parent"

时间:2015-08-28 12:11:11

标签: javascript reactjs

如何访问在父组件内创建的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函数中,我该如何访问它们? 如果我检查这个&#34;这个&#34;在函数内部,props和refs数组都为null([]);

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

2 个答案:

答案 0 :(得分:2)

向孩子添加ref标签,就像这样(我刚刚添加&#34;小部件&#34;为示例提供更多深度,但它必须是唯一的)

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

答案 1 :(得分:1)

使用作为prop传递的父句柄处理子组件中的单击。我将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'));