Замените 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

Как использовать справочные документы: 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;