Javascript 在react中创建可重用的自定义复选框组件

我正在使用React（15.5.4），并希望在React中创建一个css可自定义的复选框输入

此复选框还需要完全可访问。（由屏幕阅读器读取，可通过键盘导航到，可通过键盘切换，也可通过任何屏幕阅读器模拟点击操作切换。）

我在网上查看了一下，发现大多数自定义复选框的示例都具有类似于以下内容的HTML结构：

<div class="wrapper">
  <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">
  <label for="a11y-issue-1">There are no issues.</label>
</div>

没有问题。

虽然如果我在react中实现了它并对toggle state等进行了相关的添加，这是可行的，但我的问题是如果“for”和“id”属性没有被覆盖，那么每次调用组件时它们都会被复制

我想出了另一个解决办法：

<label className={this._getClassNames()} onClick={this._onClick.bind(this)}> 
  {children}
  <input type="checkbox" {...props} />
  <span className="checkbox__checkmark" />
</label>

{儿童}

这个解决方案确实可以工作，并且在我们到达可访问的部分之前，它的表现非常好。虽然可以使用键盘导航，但不能使用键盘切换复选框。我认为这在没有for和id属性的情况下工作的原因是因为输入在标签内

如果您想知道为什么跨度在那里，那就是自定义复选框的样式和实际输入是如何用css隐藏的

老实说，我并不介意一天结束时的html结构，只要我有一个可重复使用的复选框组件，我们可以使用css定制，并且可以访问

如果我遗漏了任何东西或任何令人困惑的东西，我们将非常感谢您的帮助，并随时提出问题，尽管我希望我提供的信息是充分的

谢谢