高度不确定动画怎么做

1. 外层div

<div
  style={{
    border: '1px solid grey',
    borderBottom: 0
  }}
/>

2. header

<div
  style={{
    padding: 12,
    cursor: 'pointer',
    borderBottom: '1px solid grey'
  }}
  onClick={showOrHidden}
>
  header 
</div>
const showOrHidden = () => setHei(hei ? 0 : ref.current.offsetHeight)

3. content

<div
  style={{
    transition: '0.3s',
    height: hei,
    overflow: 'hidden',
    visibility: hei ? 'visible' : 'hidden',
    borderBottom: '1px solid grey'
  }}
>
  <div ref={ref}>
    {list.map(i => (
      <div children={i.value} key={i.key} style={{ padding: 12 }}/>
    ))}
  </div>
  
</div>