如何访问在父组件内部创建的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（widgets）; 给我这个，创建了3个小部件：
[ReactElement, ReactElement, ReactElement]
在onBtnClick函数中，如何访问它们？如果我在函数内部检查“ this”，则props和refs数组均为null（[]）;
ref像这样向孩子添加标签（我刚刚添加了“ widget”以使示例更深入，但是它必须是唯一的）
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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句