Как получить узел DOM из ссылки на компонент класса с помощью API React.createRef () - PullRequest
Новая
       10

Как получить узел DOM из ссылки на компонент класса с помощью API React.createRef ()

0 голосов
/ 20 сентября 2018

У меня есть два компонента: 

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
};

Как правильно получить DOM-узел this.selectedItemRef в Items :: scrollToItem ()?

React docs препятствует использованию findDOMNode(), но есть ли другой способ?Должен ли я создать ссылку в Item вместо этого?Если да, то как мне получить доступ к ссылке в Items :: componentDidMount ()?

Спасибо

1 Ответ

0 голосов
/ 21 сентября 2018

Я думаю, что вы хотите current например this.selectedItemRef.current

Это задокументировано на примере на этой странице: https://reactjs.org/docs/refs-and-the-dom.html

enter image description here

И чтобы быть в безопасности, я также попробовал его на скрипке js, и он работает, как и ожидалось!https://jsfiddle.net/n5u2wwjg/195724/

Если вы хотите получить DOM-узел для React-компонента, я думаю, что предпочтительный способ справиться с этим - заставить дочерний компонент выполнять тяжелую работу.Так, если вы хотите вызвать focus для входа внутри компонента, например, вы получите компонент для установки ссылки и вызовите метод для компонента, например,

this.myComponentRef.focusInput()

и тогда у componentRef будет метод с именем focusInput, который затем вызывает на входе focus.

Если вы не хотите этого делать, вы можете взломать, используя findDOMNode и IПредположим, поэтому он не рекомендуется!

(Отредактировано, потому что после ответа я понял, что вы уже знали о current и хотели узнать о реагирующих компонентах. Очень жаль!) ​​

...