React在父组件中如何拿到子组件的虚拟dom

目前我的方法是，用一个全局变量将子组件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
	);

云景前端

浏览 4472回答 2