为 React Collapse 组件添加默认打开逻辑

Question

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

我想要一个 defaultOpen 道具，这样内容在初始渲染时保持打开状态，然后它使用 isOpen 状态来关闭和打开.

我该怎么做？

这里是一个codesandbox link: https://codesandbox.io/s/awesome-fire-wsvml

Answer 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>
    </>
  )
}

工作示例：

Answer 2

如果您不想使用属性 defaultOpen，请像这样将其提供给 App 组件：

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

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

为 React Collapse 组件添加默认打开逻辑

Add default open logic for a react Collapse component

reactjs

react-spring