将 findDOMNode 替换为 ref

Replace findDOMNode with ref

有人可以帮助我了解如何使用 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;

谢谢

如何使用 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;