这取决于您希望如何跟踪应用程序中的状态。这是一个跟踪父组件中状态的示例。本质上，您有一个单独的父 App 组件，它跟踪每个图像的状态，然后是一个 Image 组件，它呈现有或没有边框，具体取决于作为props传递的 App 状态的一部分。请参阅代码以了解我的意思。另一种方法是让活动状态存在于每个 Image 组件本身中。

代码有很多有趣的特性，主要是因为利用 ES6 的几个方面更加简洁，以及React 的 immutability helper帮助以不可变的方式更新状态数组，以及 lodash 的times方法来帮助创建我们的初始状态数组.

代码（一些缩进在 jsfiddle 的副本中有点混乱..）：

function getImage() {
    return { active: false };
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { images: _.times(6, getImage) };
    this.clickImage = this.clickImage.bind(this);
  }
  clickImage(ix) {
    const images = React.addons.update(this.state.images, {
      [ix]: { $apply: x => ({ active: !x.active}) }
    })
    this.setState({ images });
  }
  render() {
    const { images } = this.state;
    return (
        <div>
        { images.map((image, ix) =>
            <Image
              key={ix}
              ix={ix}
              active={image.active}
              clickImage={this.clickImage} />) }
        </div>
    );
  }
};

class Image extends React.Component {
    render() {
    const { ix, clickImage, active } = this.props;
    const style = active ? { border: '1px solid #021a40' } : {};
    return <img
              style={style}
              src={`https://robohash.org/${ix}`}
              onClick={() => clickImage(ix)}/>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

然后它的样子：

只需为 click 添加一个事件处理程序，它会添加一个“selected”类，然后将该选定的类设置为在 css 中具有边框。

.selectableImg {
  border: solid 1px transparent;
  margin: 10px;
}

.selectableImg.selected {
  border: solid 1px blue;
}
  

<img class="selectableImg"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

<script>
  var images = document.querySelectorAll(".selectableImg");
  
  images.forEach(function(i) {i.addEventListener("click", function(event) {
    i.classList.toggle("selected");
    })});
  </script>