目前我的方法是,用一个全局变量将子组件render时的虚拟dom实例保存下来,以方便在父组件中调用。
那么问题就是,如何不用变量直接在父组件中直接拿到子组件的虚拟dom呢?
你有更好的方法,欢迎和我一起讨论!
// 全局变量,用于记录每个子组件的虚拟DOM实例
var childrenComponent=[];
// 子组件
var Child = React.CreateClass({
componentDidMount: function (){
// 将组件最后的react实例保存下来,方便在父组件中调用其属性和方法。
childrenComponent.push(this);
},
render:function (){
return(
<p>this is a child component,number:{this.props.index}</p>
)
}
})
//父组件
var Parent = React.CreateClass({
handleCilck:function (){
//这里拿到子组件的虚拟DOM,以进行一些操作
console.log(childrenComponent[0])
},
render:function (){
var children = [];
var newChild = function (i){
return <Child index={i} />
}
for(var i=0, i<5, i++){
children.push(newChild(i))
}
return(
<div>
{children}
<button onClick={this.handleClick}></button>
</div>
)
}
})
React.render(
<Parent />,
document.body
);
你这个描述的优点不清楚啊,分两种情况来讨论下:
1、如果是在render parent时传递的子组件,通过props.children
来获取
var Parent = React.createClass({
render() {
var children = this.props.children; // 获取子组件
}
});
React.render(
<Parent>
<Child />
</Parent>
)
2、如果你说的子组件只是Parent的内部元素,那就存在一个内部变量中就行
var Parent = React.createClass({
handleClick: function(e) {
console.log(this._children[0]);
},
renderChildren: function() {
this._children = [];
...
// when return Child, do it like this
<Child index={i} ref={function(ref) {this._children[i] = ref;}} />
...
}
...
没有看懂意义何在
完善一下:
var Child = React.createClass({
render:function (){
return (
<input type="text"/>
);
}
});
var Parent = React.createClass({
componentDidMount: function(){
console.log(this._children[0]);
},
render:function (){
var this._children = []
return (
// <Child ref={(c) => this._children[i] = c} />; //ES6语法
<Child ref={function(c){this._children[0] = c}} />
);
}
});