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

Question

我有一个列表如下:

<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 但没有成功。

Answer 1

React 会根据您渲染的内容对 DOM 进行必要的更改，因此不要考虑在状态更改时添加和删除 classNames，而是考虑渲染方法的输出如何变化。

例如如果您有一些 selectedId 状态代表当前选定的 id:

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>
}

---

如果您手动渲染这些内容而不是基于事物列表，那么重复起来会很乏味，因此您可以将一些实现细节分解到另一个组件中:

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>
}