如何访问在父组件内创建的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([]);
答案 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'));