reactjs - 无显示 -> 在 reactjs styled-components 中使用状态显示

Question

我试图构建模态组件。我的方法正在更改display: none为display: block当状态可见改变时。

这由函数buildTopicList(topicDummy)给出的嵌套标签，

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

---

为了解决这个问题，使用
[topicList, setTopicList] = useState(buildTopicList(topicDummy))` and replace 了 buildTopicList(topicDummy) widthtopicList```。

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

请看下面的代码。

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>

标签： reactjs

Answer 1

试试这样：

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