Javascript 如果React中的id为true，如何添加类？

我的名单如下：

<div id="123" className="panel"></div>
<div id="456" className="panel"></div>
<div id="789" className="panel"></div>
<div id="101" className="panel"></div>

所以，如果id等于true，则添加类open，如果为false，则删除open

---

在react中是否可能实现这一点，我尝试过使用ref，但没有成功。

react根据渲染内容对DOM进行必要的更改，因此，与其考虑在状态更改时添加和删除类名，不如考虑渲染方法的输出如何更改

e、 g.如果您有一些表示当前所选id的

selectedId

状态：

render() {
  let {selectedId} = this.state
  return <div>
    <div id="123" className={'panel' + (selectedId === '123' ? ' open' : '')}>...</div>
    <div id="456" className={'panel' + (selectedId === '456' ? ' open' : '')}>...</div>
    ...
  </div>
}

render（）{
让{selectedId}=this.state
返回
...
...
...
}

---

如果您手动渲染这些内容而不是基于一系列内容，那么重复这些内容会变得很乏味，因此您可以将一些实现细节分解为另一个组件：

function Panel({children, id, open}) {
  let className = 'panel'
  if (open) className += ' open'
  return <div id={id} className={className}>{children}</div>
}

render() {
  let {selectedId} = this.state
  return <div>
    <Panel id="123" open={selectedId === '123'}>...</Panel>
    <Panel id="456" open={selectedId === '456'}>...</Panel>
    ...
  </div>
}

功能面板（{children，id，open}）{
让className='panel'
如果（打开）类名+=‘打开’
返回{children}
}
render（）{
让{selectedId}=this.state
返回
...
...
...
}

“如果id等于true”id何时以及如何为true？您如何呈现此列表？听起来你应该使用一个道具，而不是在渲染后操纵DOM来添加一个类。我有一些要点，每个要点都有一个id，一旦单击id就会返回一些代码。你的问题陈述不清楚！