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