将 findDOMNode 替换为 ref

Question

有人可以帮助我了解如何使用 ref 代替 findDOMNode 吗？我正在尝试引用一个 d3 对象，最初是使用 findDOMNode 这样做的，但我收到警告说这已被弃用。请在下面查看我的代码：

class Node extends Component {
  componentDidMount() {
    this.d3Node = d3.select(ReactDOM.findDOMNode(this))
      .datum(this.props.data)
      .call(FORCE.enterNode)
  }

  componentDidUpdate() {
    this.d3Node.datum(this.props.data)
      .call(FORCE.updateNode)
  }

  render() {
    return (
      <g className='node'>
        <circle onClick={this.props.addLink}/>
        <text>{this.props.data.name}</text>
      </g>
    );
  }
}

export default Node;

谢谢

Answer 1

如何使用 refs 文档：https://reactjs.org/docs/refs-and-the-dom.html

class Node extends React.Component {
  constructor(props) {
    super(props)
    this.gRef = React.createRef()
  }
  componentDidMount() {
    this.d3Node = d3.select(this.gRef.current)
      .datum(this.props.data)
      .call(FORCE.enterNode)
  }

  componentDidUpdate() {
    this.d3Node.datum(this.props.data)
      .call(FORCE.updateNode)
  }

  render() {
    return (
      <g className='node' ref={this.gRef}>
        <circle onClick={this.props.addLink}/>
        <text>{this.props.data.name}</text>
      </g>
    );
  }
}

export default Node;

将 findDOMNode 替换为 ref

Replace findDOMNode with ref

reactjs

react-component

react-dom

react-ref