不显示->在reactjs样式化组件中使用状态显示

Question

我尝试构建Modal组件。 当状态 可见 更改时，我的方法是将display: none更改为 的display: block。

内有由功能 buildTopicList（topicDummy），

给定的嵌套标签

但是当我更改<TopicBox>的道具 visible 时，返回值buildTopicList(topicDummy) is gone and no more contents inside```

---

要修复此问题，请使用
[topicList, setTopicList] = useState(buildTopicList(topicDummy))` and replace buildTopicList（topicDummy）width topicList`。

我的问题是，当我仅使用<TopicBox></TopicBox>但使用buildTopicList(topicDummy)时，状态改变时{topicList}内的内容为什么消失了？

plz请参阅下面的代码。

export const TopicBox = styled.div<{
  visible: boolean 
}>`
  display: ${p => p.visible ? 'initial' : 'none'};
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 16px;
  position: absolute;
  top: 56px;
  background-color: ${p=>p.theme.colors.white};
  max-width: 528px;
  max-height:216px;
  overflow-y: auto; 

`;
///this works
const [topicList, setTopicList ] = useState(buildTopicList(topicDummy));

const toggleTopicList = () => {
      setVisible((visible) => !visible);
    }
return
...
<TopicButton
    onClick={toggleTopicList}
>
    <Hamburger/>  
    <TopicTitle>Topic</TopicTitle>
</TopicButton>
<TopicBox
   visible={visible}
   ref={topicRef}
>
   {topicList}
</TopicBox>

//this doesn't work
const toggleTopicList = () => {
      setVisible((visible) => !visible);
    }
return
...
<TopicButton
    onClick={toggleTopicList}
>
    <Hamburger/>  
    <TopicTitle>Topic</TopicTitle>
</TopicButton>
<TopicBox
   visible={visible}
   ref={topicRef}
>
   {buildTopicList(topicDummy)}
</TopicBox>

Answer 1

尝试这样：

display: ${({ visible }) => visible ? 'initial' : 'none'};