ref属性是访问ReactJS应用程序中DOM的唯一方法吗？

Question

组件的ref属性是“逃离ReactJS世界”并且在ReactJS应用程序中工作时直接与DOM交互的唯一惯用方法吗？

显然，我可以做类似的componentDidMountdocument.querySelector，但除此之外...

Answer 1

class App extends React.Component{ 
 
    componentWillMount(){ 
 
     console.log(ReactDOM.findDOMNode(this)) 
 
    } 
 

 
    componentDidMount(){ 
 
     console.log(ReactDOM.findDOMNode(this)) 
 
    } 
 
    render(){ 
 
     return(
 
      <div>wefewfewfewfwefewf</div> 
 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />,document.getElementById("app") 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

您可以使用ReactDOM.findDOMNode。它需要一个反应组件并返回一个底层的dom元素。

Answer 2

组件的ref属性是“逃离ReactJS世界”的唯一惯用方法，并且在ReactJS应用程序中工作时直接与DOM交互？

不，你可以逃脱使用React.findDOMNode功能也实虽然建议使用refs代替。

refs和上述方法之外，我不认为有任何其他的反应转义的方法。这就是说，你也可以使用香草JavaScript来做到这一点，尽管这不是首选。