为反应折叠组件添加默认打开逻辑答案

【问题标题】：Add default open logic for a react Collapse component为反应折叠组件添加默认打开逻辑
【发布时间】：2021-11-11 05:38:17
【问题描述】：

我用 react-spring 创建了这个 react Collapse 组件，它具有打开和关闭功能。

我想要一个 defaultOpen 道具，因此内容在初始渲染时保持打开状态，然后使用 isOpen 状态进行关闭和打开。

我该怎么做？

这是一个代码框链接：https://codesandbox.io/s/awesome-fire-wsvml

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

为此，您需要拥有Collapsible 组件自己的状态

并从父组件传递defaultOpen

类似这样的：

const Collapse = ({ defaultOpen = false, children }) => {
  const [isOpen, setIsOpen] = useState(defaultOpen)
  const [ref, { height: viewHeight }] = useMeasure()
  const { height, opacity } = useSpring({
    from: { height: 0, opacity: 1 },
    to: {
      height: isOpen ? viewHeight : 0,
      opacity: isOpen ? 1 : 0,
    },
  })

  return (
    <>
      <button onClick={() => setIsOpen(isOpen => !isOpen)}>{isOpen ? 'close' : 'open'}</button>
      <Content style={{ opacity, height }}>
        <a.div ref={ref}>{children}</a.div>
      </Content>
    </>
  )
}

工作示例：

【讨论】：

谢谢。是的，这是解决它的一种方法，但我想同时拥有这两种功能。想象有更多的折叠组件，我希望它们中的一些最初使用 defaultOpen 道具打开，其余的使用是打开状态。
为此，您需要单个可折叠组件的状态，然后从外部传递 defaultValue。我更新了答案
对于每个具有defaultValue 的组件，defaultValue 仅在您不为其提供实际值时才有效。包括原生 HTML 选择、单选或复选框元素。

【解决方案2】：

如果您不想使用属性defaultOpen，请将其提供给 App 组件，如下所示：

export default function App({ defaultOpen = true }) {
  const [isOpen, setIsOpen] = useState(defaultOpen)

  return (
    <Collapse isOpen={isOpen}>
      ...
    </Collapse>
  )
}

【讨论】：