Flowbite-react Accordion组件添加状态条件后失效问题

Flowbite-react的Accordion组件内部会通过React.cloneElement处理所有直接子元素，但当你的条件access === 2不成立时，对应的条件渲染表达式会返回null，而React.cloneElement不接受null作为参数，因此抛出错误。另外你用Fragment包裹单个Panel属于多余操作，不会解决问题反而在条件不满足时留下无效的null节点。

方案1：过滤无效子元素 #

用数组包裹所有Accordion.Panel，过滤掉null等无效值，确保Accordion的子元素全为有效组件：

const [access, setAccess] = useState(null);
setAccess(2);

<Accordion arrowIcon="">
  {[
    <Accordion.Panel key="panel1">
      <Accordion.Title>dummy title 1</Accordion.Title>
      <Accordion.Content>dummy text 1.....</Accordion.Content>
    </Accordion.Panel>,
    access === 2 && (
      <Accordion.Panel key="panel2">
        <Accordion.Title>dummy title 2</Accordion.Title>
        <Accordion.Content>dummy text 2.....</Accordion.Content>
      </Accordion.Panel>
    )
  ].filter(Boolean)}
</Accordion>

方案2：简化条件渲染逻辑 #

直接移除多余的Fragment，仅在条件满足时渲染第二个Panel：

const [access, setAccess] = useState(null);
setAccess(2);

<Accordion arrowIcon="">
  <Accordion.Panel>
    <Accordion.Title>dummy title 1</Accordion.Title>
    <Accordion.Content>dummy text 1.....</Accordion.Content>
  </Accordion.Panel>

  {access === 2 && (
    <Accordion.Panel>
      <Accordion.Title>dummy title 2</Accordion.Title>
      <Accordion.Content>dummy text 2.....</Accordion.Content>
    </Accordion.Panel>
  )}
</Accordion>

注：如果方案2仍出现报错，说明Flowbite的Accordion组件未兼容子元素为null的场景，此时方案1的过滤方式更可靠。

内容的提问来源于stack exchange，提问作者Hafiz Qaiser