父组件通过refs获取子组件真实dom节点的问题？

Question

父页面

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// root.js import React from 'react'; import ReactDom from 'react-dom'; import RootCild from './components/rootChild';   export default class Root extends React.Component{     componentDidMount(){         console.log(this.refs.root)         console.log(this.refs.rootChild)     }     render(){         return(             <div>                 <h1 ref='root'>Root</h1>                 <RootCild ref='rootChild' />             </div>                       );     }; } ReactDom.render(<Root/>,document.getElementById('example'))

子页面

1 2 3 4 5 6 7 8

var React = require('react'); export default class RootChild extends React.Component{     render(){         return(             <div>RootChild</div>         )     } }

结果

我我尝试了很多方法，有一种方法有效，在子组件中添加另外一个ref，定义一个方法

1 2 3

getChildDom(){         return this.refs.child_inner_ref     }

在父组件中调用this.refs.rootChild.getChildDom()可以获得子节点。

问题是：

有没有简单的方法获取子组件的真实dom节点，我以前看过一个教程好像是通过findDomNode(this.refs.rootChild)就可以获得，现在不可以了

Answer 1

Parry 2017-03-04 09:59:42

https://github.com/facebook/react/issues/4244

• 提问者 未期而遇 #1

  新版本react是ReactDOM.findDOMNode(this.refs.rootChild)，非常感谢！