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

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

我的问题是，在任何给定的时间，这个组件可能有任意数量的实例。我是否必须在安装每个组件时为其创建一个唯一的ID，或者是否有某种方式允许我仅引用组件特定实例中的元素？可以在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>
  }
});

var MyClass=React.createClass({
makeDivsBigger:function（）{
…？//如何仅选择当前实例中的div？
},
render:function（）{
}
});

有几种方法可以做到这一点，但有一件事您很少想做，那就是查询DOM以查找要处理的元素。这些元素已经在你的反应宇宙中，所以你不需要找到它们

更好的方法是让父组件使用内部状态控制元素的大小

下面是一个示例实现：

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;
}

var MyClass=React.createClass({
getInitialState:函数（）{
返回{
大小：“”
};
},
makeDivsBigger:function（）{
这是我的国家({
尺寸：“更大”
})
},
render:function（）{
}
});
//在CSS中的某个地方
.更大{
高度：500px；
}

太棒了，我知道这会很简单。非常感谢。

{dark”+size}

中的

size

不应该是

这个.state.size

？