React 查找指定 DOM node

Question

有时候添加插件，比如 quill 文本编辑器，瀑布流，需要向对象传入 node element

使用 ref

class App extends Component {
  render() {
    return (
      <div className="App" ref="app">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
  componentDidMount() {
     console.log(this.refs.app);
  }
}

在指定 element 添加 ref，并指定唯一名称，就可以在组件内通过 this.refs 访问了，可以同时添加多个来访问不同的 element

使用 ReactDOM

import ReactDOM from 'react-dom'

componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node);
  }