awawa

Appearance

react/no-find-dom-node ​

禁止使用findDOMNode

为什么 ​

findDOMNode在新版本中可能会被废弃

建议 ​

推荐使用回调refs代替

错误示例 ​

tsx
import React from 'react';
import ReactDOM from 'react-dom';

export default class MyComponent extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />;
  }
}
import React from 'react';
import ReactDOM from 'react-dom';

export default class MyComponent extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />;
  }
}

正确示例 ​

tsx
import React from 'react';

export default class MyComponent extends React.Component {
  node = null;

  render() {
    console.log(this.node);

    return (
      <div
        ref={(ref) => {
          this.node = ref;
        }}
      />
    );
  }
}
import React from 'react';

export default class MyComponent extends React.Component {
  node = null;

  render() {
    console.log(this.node);

    return (
      <div
        ref={(ref) => {
          this.node = ref;
        }}
      />
    );
  }
}

参考 ​