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

来源:

未期而遇

2017-03-04

父页面

// 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'))

子页面

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

结果

http://szimg.mukewang.com/58ba16c70001f7c007490268.jpg

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

getChildDom(){
		return this.refs.child_inner_ref
	}

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

问题是:

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

写回答

1回答

Parry

2017-03-04

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

1
1
未期而遇
新版本react是ReactDOM.findDOMNode(this.refs.rootChild),非常感谢!
2017-03-05
共1条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程