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，则添加类打开，如果为false，则删除open。

这可能是反应，我尝试过使用ref但是没有用。

Answer 1

React句柄根据你渲染的内容对DOM进行必要的更改，因此不要考虑在状态发生变化时添加和删除classNames，而应考虑渲染方法输出的变化。

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

如果您手动渲染这些内容而不是基于事物列表，则重复繁琐，因此您可以将一些实现细节分解为另一个组件：

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

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

1 个答案: