Javascript：如何在反应类的一个实例中选择元素？

Question

当从 React 组件的一个实例中注册单击事件时，我正在尝试在该组件的一个实例中选择元素（具有特定类的 div）。我不希望从该组件的其他实例中选择具有该类的 div。

我的问题是，在任何给定时间，该组件都可能有任意数量的实例。我是否必须在安装每个组件时为其创建一个唯一 ID，或者 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>
  }
});

Answer 1

有几种方法可以解决此问题，但您很少想做的一件事是查询 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;
}