reactjs - 如何使用 React.createRef() API 从类组件引用获取 DOM 节点

Question

我有这两个组件:

import { findDOMNode } from 'react-dom';

class Items extends Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.selectedItemRef = React.createRef();
    }

    componentDidMount() {
        if (this.props.selectedItem) {
            this.scrollToItem();
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.selectedItem !== nextProps.selectedItem) {
            this.scrollToItem();
        }
    }

    scrollToItem() {
        const itemsRef = this.ref.current;
        const itemRef = findDOMNode(this.selectedItemRef.current);

        // Do scroll stuff here
    }

    render() {
        return (
            <div ref={this.ref}>
                {this.props.items.map((item, index) => {
                    const itemProps = {
                        onClick: () => this.props.setSelectedItem(item.id)
                    };

                    if (item.id === this.props.selectedItem) {
                        itemProps.ref = this.selectedItemRef;
                    }

                    return <Item {...itemProps} />;
                })}
            </div>
        );
    }
}

Items.propTypes = {
    items: PropTypes.array,
    selectedItem: PropTypes.number,
    setSelectedItem: PropTypes.func
};

和

class Item extends Component {
    render() {
        return (
            <div onClick={() => this.props.onClick()}>item</div>
        );
    }
}

Item.propTypes = {
    onClick: PropTypes.func
};

在 Items::scrollToItem() 中获取 this.selectedItemRef 的 DOM 节点的正确方法是什么？

React docs不鼓励使用 findDOMNode()，但是还有其他方法吗？我应该在 Item 中创建 ref 吗？如果是这样，我如何访问 Items::componentDidMount() 中的引用？

谢谢

Answer 1

我认为你想要的是当前，例如this.selectedItemRef.current

它记录在本页的示例中: https://reactjs.org/docs/refs-and-the-dom.html

为了安全起见，我还在 js fiddle 上尝试过它，它按预期工作! https://jsfiddle.net/n5u2wwjg/195724/

如果你想获取 React 组件的 DOM 节点，我认为处理这个问题的首选方法是让子组件来完成繁重的工作。因此，例如，如果您想在组件内部的输入上调用 focus，您可以让组件设置 ref 并调用组件上的方法，例如

this.myComponentRef.focusInput()

然后，componentRef 将有一个名为 focusInput 的方法，然后在输入上调用 focus。

如果你不想这样做，那么你可以使用 findDOMNode 进行修改，我想这就是不鼓励这样做的原因!

(编辑是因为在回答后我意识到您已经了解current并且想了解react组件。对此非常抱歉!)