Блог

Я пытаюсь выбрать элементы (divs с определенным классом) в одном экземпляре компонента React, когда событие click регистрируется из этого же компонента. Я не хочу, чтобы divs с этим классом выбирались из других экземпляров этого компонента.

Моя проблема в том, что в любой момент времени может быть любое количество экземпляров этого компонента. Должен ли я создавать уникальный идентификатор для каждого компонента при его монтировании, или есть какой-то способ, с помощью которого React позволяет мне ссылаться только на элементы, найденные в конкретном экземпляре компонента? Можно ли это как-то сделать с помощью функции обратного вызова в классе React?

Например:

 var MyClass = React.createClass({
  makeDivsBigger: function() {
    ...? // How to only select the divs within the current instance?
  },

  render: function() {
    <div className="container">
      <div className="dark"></div>
      <div className="light"></div>
      <div className="bright"></div>
      <button onClick={this.makeDivsBigger}></button>
    </div>
  }
});
  

Для этого есть несколько способов, но одна вещь, которую вы редко хотите делать, это запрашивать DOM для поиска элементов для работы. Эти элементы уже находятся внутри вашего юниверса React, поэтому вам не нужно их находить!

Лучшим подходом было бы, чтобы родительский компонент контролировал размер элементов с помощью внутреннего состояния.

Вот один пример реализации:

 var MyClass = React.createClass({
  getInitialState: function() {
    return {
      size: ''
    };
  },

  makeDivsBigger: function() {
    this.setState({
      size: 'bigger'
    })
  },

  render: function() {
    <div className="container">
      <div className={"dark "   this.state.size}></div>
      <div className="light"></div>
      <div className="bright"></div>
      <button onClick={this.makeDivsBigger}></button>
    </div>
  }
});

// somewhere in your CSS
.bigger {
  height: 500px;
}