React中的每一个组件都是一个状态机,通常情况下,我们通过设置组件的状态就可以完成UI的更新,但是在某些情况下确实需要直接操作DOM。
React中操作DOM的方法:
Refs
findDOMNode()
findDOMNode()
当组件加载到页面上之后(mounted),你就可以通过 getDOMNode()
方法拿到组件对应的 DOM 元素。
React.findDOMNode()只在mounted组件中调用,mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常。
Refs
通过在要引用的 DOM 元素上面设置一个 ref
属性指定一个名称,然后通过 this.refs.name
来访问对应的 DOM 元素。
比如有一种情况是必须直接操作 DOM 来实现的,你希望一个 <input/>
元素在你清空它的值时 focus
,你没法仅仅靠 state
来实现这个功能。
class App extends Component { constructor() { return { userInput: '' }; } handleChange(e) { this.setState({ userInput: e.target.value }); } clearAndFocusInput() { this.setState({ userInput: '' },() => { this.refs.theInput.focus(); }); } render() { return ( <div> <div onClick={this.clearAndFocusInput.bind(this)}> Click to Focus and Reset </div> <input ref="theInput" value={this.state.userInput} onChange={this.handleChange.bind(this)} /> </div> ); } }
如果ref
是设置在原生 HTML
元素上,它拿到的就是 DOM
元素,如果设置在自定义组件上,它拿到的就是组件实例,这时候就需要通过 findDOMNode
来拿到组件的 DOM
元素。
因为无状态组件没有实例,所以
ref
不能设置在无状态组件上,一般来说这没什么问题,因为无状态组件没有实例方法,不需要ref
去拿实例调用相关的方法,但是如果想要拿无状态组件的DOM
元素的时候,就需要用一个状态组件封装一层,然后通过ref
和findDOMNode
去获取。