通过 refs 响应访问 DOM 元素而不是对象答案

【问题标题】：React access DOM element instead of object thru refs通过 refs 响应访问 DOM 元素而不是对象
【发布时间】：2019-03-19 14:32:45
【问题描述】：

我正在尝试在 react 中访问 DOM 元素，因为它需要第三方库。而且我可以使用内置反应元件的参考来做到这一点。比如<div ref={this.someRef}<span ref={this.otherRef}等等。

我可以通过this.someRef.current 访问 DOM elem 但是当我尝试对自定义元素 <SomeCustomElem ref={this.anotherRef} 执行相同的技巧时，this.anotherRef.current 会返回一个值对象，我看不到任何使用自定义组件访问 DOM elem 的方法。

有没有机会访问自定义元素的 DOM？

【问题讨论】：

顺便说一句，您要使用的第 3 方库是什么？如果它修改了元素的 DOM，因为它的所有更改都将在下一个 render() 重写

标签： javascript reactjs

【解决方案1】：

ReactDOM.findDOMNode(<Any React Element>)  //Returns a DOM node 


//eg. Using "this" inside a react el.
ReactDOM.findDOMNode(this).scrollIntoView()

确保尝试捕获它，因为它可能返回 null

【讨论】：

【解决方案2】：

这取决于SomeCustomElem 是什么类型的组件。

对于<SomeCustomElem ref={this.anotherRef}/>，可以使用ReactDOM findDOMNode：

findDOMNode(this.anotherRef.current);

如果SomeCustomElem 是功能组件，则无法执行此操作。 ref 和 findDOMNode 都不会处理它。

【讨论】：

【解决方案3】：

您可以使用react-dom 访问react 附带的任何类型的DOM 元素。

要访问 DOM，请使用 react 元素传递 ref，然后使用 findDOMNode 方法访问它。

例子：

import ReactDOM from 'react-dom';

...  

let reactElement = ReactDOM.findDOMNode(this.refs.refName)

...  

<Component ref='refName'/>

【讨论】：

ref='refName' 语法已弃用。
findDOMNode 在严格模式下也被弃用：reactjs.org/docs/…

【解决方案4】：

findDOMNode is suggested to avoid:

findDOMNode 是一个用于访问底层 DOM 节点的逃生舱口。在大多数情况下，不鼓励使用此逃生舱口，因为它会穿透组件抽象。

您可以改为forward ref。

但请以“ref 将您链接到给定组件”的方式考虑一下。所以也许你只是像这样use separated prop：

class CustomComponent extends Component {
    render() {
        return (<div ref={this.props.outerDivRef}> .... </div>);
    }
}

class Parent extends Component {
    constructor() {
        this.innerRef = React.createRef();
    }

    render() {
        return (<CustomComponent outerDivRef={this.innerRef} />);
    }
}

除了最后一个模式比 ref 转发功能更老，但它看起来更灵活。

【讨论】：