Question

我试图在react中访问DOM元素，因为它需要第三方库。而且我能够使用内置的react eles的引用来做到这一点。像<div ref={this.someRef} <span ref={this.otherRef}等

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

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

Answer 1

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

要访问DOM，请传递带有react元素的ref，然后再通过findDOMNode方法对其进行访问。

示例：

import ReactDOM from 'react-dom';

...  

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

...  

<Component ref='refName'/>

Answer 2

这取决于SomeCustomElem是哪种组件。

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

findDOMNode(this.anotherRef.current);

如果SomeCustomElem是功能组件，则无法完成此操作。 ref和findDOMNode都无法使用。

Answer 3

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


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

请务必尝试捕获它，因为它可能会返回null

Answer 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} />);
    }
}

除了最后一个模式比引用转发功能还早，但它看起来更灵活。

反应访问DOM元素而不是对象通过引用

4 个答案: