Reactjs 在 React 中设置复选框 check属性

我对React和复选框有一个非常恼人的问题.我正在使用的应用程序需要一个复选框列表，这些复选框表示在后端保留的设置.There is an option to restore the settings to their original state

首先，我创建了一个组件，它有一个类似设置 map 的对象.每个设置都有一个键和一个布尔值.因此:

{
    bubbles: true,
    gregory: false
}

代表如下:

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

现在，React似乎不知道复选框应该如何工作.我不想设置复选框的值，我想要"checked"属性.

然而，如果我try 这样的事情:

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

我得到这个警告:

警告:AwesomeComponent正在将复选框类型的非受控输入更改为受控.输入元件不应从非受控切换到受控(反之亦然).在组件的使用生命周期 内，决定使用受控或非受控输入元件.更多信息:[some useless docs page I read several times to no avail]

所以我决定创建另一个组件来包装每个复选框，我得到了以下结果:

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

现在checked是我所在州的一处房产.

这会产生同样的警告，所以我try 使用defaultChecked:

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

这会使警告消失，但现在无法将checked值重置为默认值.所以我试着使用方法componentWillReceiveProps，这样我很确定我的状态是正确的，this.state.checked是正确的，组件再次渲染.

的确如此.但复选框仍保持原样.

我在想，也许有一种方法可以强制重新渲染组件，因此它会捕获新的defaultChecked值并使用它.但我不知道该怎么做.可能会 suppress 此组件的警告only？可能吗？也许还有别的办法？