javascript - 带有无 ID 图像的可重用 React 复选框组件

Question

我正在尝试为复选框制作一个可重用的 React 组件。

现在，我知道复选框的标准图像替换是什么样子的，所以它在我的 React 元素中:

import React, { Component } from 'react';

class Checkbox extends Component {
  render() {
    return (
      <div className="checkbox">
        <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text}
      </div>
    );
  }
}

export default Checkbox;

这是通用的 CSS:

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: url("checked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}
input[type=checkbox]:checked + label {
  background: url("unchecked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}

现在，因为这是 React，我希望能够重用这个组件。但是，我不能重复使用 ID。我应该怎么做才能制作一个带有图像的复选框来替换 native 复选框？没有这种“标签”方法，有没有办法做到这一点？ 我不希望使用随机数作为 ID 或类似的东西。

Answer 1

实例化时将 id 作为 prop 传递给组件。

<Checkbox id="whatever" value={state.valueOrWhatever} text="Change The Value!" />

在你的组件中(注意 for 在 JSX 中是 htmlFor ):

<input type="checkbox" name={this.props.id} value={this.props.value} id={this.props.id} />
<label htmlFor={this.props.id}></label> {this.props.text}