React, как получить доступ к элементу DOM в моей функции рендеринга из того же компонента
Мне интересно, какова наилучшая практика доступа к элементам DOM внутри моей функции рендеринга из того же компонента. Обратите внимание, что я буду отображать этот компонент несколько раз на странице.
например
var TodoItem = React.createClass({
...
render:function(){
function oneSecLater(){
setTimeout(function(){
//select the current className? this doesn't work, but it gives you an idea what I want.
document.getElementsByClassName('name').style.backgroundColor = "red";
)}, 1000);
}
return(
<div className='name'>{this.oneSecLater}</div>
)
})
5 ответов
здесь нет необходимости использовать setTimeout. Существуют методы жизненного цикла для компонента, из которых componentDidMount вызывается после рендеринга. Таким образом, вы можете получить ссылку на div В метод.
var TodoItem = React.createClass({
...
componentDidMount: function () {
if(this.myDiv) {
this.myDiv.style.backgroundColor = "red";
}
}
render:function(){
return(
<div className='name' ref = {c => this.myDiv = c}></div>
);
});
можно использовать ReactDOM.findDOMNode(this) для доступа к базовому узлу DOM. Но доступ к узлу DOM и манипулирование, как вы делаете, противоречит стилю программирования React. Лучше использовать переменную состояния и называть setState метод для повторного отображения DOM.
вы можете использовать ref callback для доступа к элементу dom в react, который React Docs рекомендует следовать
и сделайте это в componentDidMount функция жизненного цикла как refs не будет доступна до создания DOM
var TodoItem = React.createClass({
...
componentDidMount() {
setTimeout(function(){
this.myDiv.style.backgroundColor = "red";
)}, 1000);
}
render:function(){
return(
<div className='name' ref={(ele) => this.myDiv = ele}></div>
)
})
вот мое решение: Чтобы получить computedCss определенного элемента, необходимо сначала добавить атрибут ref в elemenet.
Введите описание изображения здесь
render(){
<div>
<Row className="chartline2">
<Col className="gutter-row" span={24}>
<div className="gutter-box lineChartWrap" id="lineChartWrap" ref="lineChartWrap">
<LineChart data={lineChartData} options={lineChartOptions} width="100%" height="300"/>
</div>
</Col>
</Row>
</div>
}
а затем в функции componentDidUpdate () получите css вашего элемента с помощью window.getComputedStyle(это.рефери.lineChartWrap).XXX Введите описание изображения здесь
componentDidUpdate(){
console.log("------- get width ---");
let ele = document.querySelector("#lineCharWrap");
console.log(this.refs.lineChartWrap);
console.log(window.getComputedStyle(this.refs.lineChartWrap).width);
}