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

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
);

你这个描述的优点不清楚啊,分两种情况来讨论下:

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}} />
        );
    }
});
【热门文章】
【热门文章】