Как получить ответное смещение div/позицию в реакции?

48
3

В моем возврате кода у меня есть:

return (
<div className="pos__container" >
<div className="pos__container--line" ></div>
{timeList}
</div>
);

<div className="pos__container--line"> имеет margin-left:10%; другие стили не имеют значения.

В функции под конструктором я хочу получить свою позицию.

Чтобы получить смещение, мне нужно сначала получить div.

Я попытался: const element = ReactDOM.findDOMNode(this); который возвращает findDOMNode was called on an unmounted component. Также попытался использовать document.QuerySelector(". Pos__container - line"); который возвращает null

Почувствуйте, что я вне вариантов.

Любые предложения, как я мог бы сделать это правильно или любые другие способы сделать это?

Любая помощь будет оценена по достоинству.

Заранее спасибо!

спросил(а) 2017-07-08T00:13:00+03:00 2 года, 7 месяцев назад
1
Решение
77

Вам необходимо использовать метод жизненного цикла React, который вызывается при установке компонента.

componentDidMount(){
var node = ReactDOM.findDOMNode(this);
console.log(window.getComputedStyle(node).offset);
}

ответил(а) 2017-07-08T00:28:00+03:00 2 года, 7 месяцев назад
81

Во-первых, вам нужно добавить ссылку на интересующий вас элемент:

return (
<div className="pos__container" >
<div className="pos__container--line" ref={el => this.containerLine = el} ></div>
{timeList}
</div>
);

Затем вы можете получить доступ к этому ref после того, как компонент был отображен:

componentDidMount() {
// it is a regular DOM node
this.containerLine.offsetTop
// or with jquery
$(this.containerLine).offset()
}

ответил(а) 2017-07-08T00:18:00+03:00 2 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема