Реагировать, как получить доступ к элементу 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>
        )



})

Ответ 1

Здесь нет необходимости использовать 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>
    );
});

Ответ 2

Вы можете использовать ReactDOM.findDOMNode(this) для доступа к базовому DOM node. Но доступ к DOM node и манипулирование, как и вы, противоречат стилю программирования React. Лучше использовать переменную состояния и вызывать метод setState для повторной рендеринга DOM.

Ответ 3

Вы можете использовать ref callback для доступа к элементу dom в реакции, и это то, что React Docs рекомендует следовать

и выполняйте это в функции componentDidMount lifecycle, поскольку 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>
        )

})

DOCS

Ответ 4

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

введите описание изображения здесь

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(this.refs.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);
	}

Ответ 5

Вам следует избегать доступа к элементу DOM, потому что весь смысл реакции заключается в размещении абстракции над dom. React сохраняет представление DOM в памяти, которая называется VirtualDom. Работа с VirtualDom облегчит модульное тестирование вашего приложения. Если вы действительно знаете, что делаете, вот как это сделать:

componentDidMount(){
const name=this.name.current.style() //current will return the actual DOM 
element
}
name=React.createRef()  //create a ref object

<div ref={this.name} className="anything" /> //your classname does not need to be named as "name". You access the element via the "ref" attribute not the classname.

В ComponentDidMount, когда ваш компонент смонтирован, будет применено его изменение стиля.

Ответ 6

Просто натолкнулся на это после попытки выполнить проверку формы, прежде чем открывать модальное оформление проверки с помощью React 14.

Я хотел бы отметить, что вы на самом деле не обращаетесь к элементу DOM со ссылками. Вы просто получаете доступ к объекту React Component. Показанный здесь:

Верхняя часть вызывает ref.ticketForm, нижняя часть показывает document.getElementById('ticketform').

Причина, по которой мне нужно было это сделать, была следующая:

<Button color="success" size="lg" type="button" onClick={(e) => {
  const ticketForm = document.getElementById('ticketForm');
  const isValid = ticketForm.reportValidity();
  if (!isValid) e.stopPropagation();
}}>Buy Tickets</Button>

reportValidity() - это метод элемента DOM: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

Обращаясь к этой проблеме, этот человек показал, что этот метод используется на эталонном объекте, что, естественно, не правильно: https://github.com/azmenak/react-stripe-checkout/issues/121#issuecomment-431635855

Надеюсь, это прояснит, что DOM-элементы не равны явно React Components. Если вам нужно каким-либо образом манипулировать DOM, сначала сделайте это реагирующим образом. Это крайний случай, когда я предпочел бы полагаться на проверку формы для динамической формы, а не на ручную проверку.

Ответ 7

componentDidMount(){
    document.querySelector("#myElem").innerHTML = "Boom!";
}