javascript - 带有反应钩子的样式化组件
问题描述
我正在使用带有样式组件的钩子。单击时我想显示DropdownContentUI
. 如何将道具从状态传递给 UI 组件?
const DropdownContentUI = styled.div`
display: ${props=>props.isOpen ? 'inline-flex' : 'none'};
position: absolute;
background-color: #f9f9f9;
top: 100%;
left: 0;
z-index: 1;
flex-flow: column;
`;
const DropdownArrows = () => {
const [isOpen, setTrigger] = useState(false);
return (
<DropdownArrowsUI onClick={()=> setTrigger(!isOpen)} isOpen>
<DropdownArrowsWrapperUI>
<DropdownIconUI width="8" height="11" viewBox="0 0 8 11">
<path d="M1 4.04L4.04 1L7.08 4.04" stroke="#BACCD8" />
<path d="M7.08008 6.46L4.04008 9.5L1.00008 6.46" stroke="#BACCD8" />
</DropdownIconUI>
</DropdownArrowsWrapperUI>
<DropdownContentUI>
<DropdownArrowsWrapperUI>
<DropdownIconUI width="8" height="7" viewBox="0 0 8 7">
<path d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2" />
<path d="M4 4V7" stroke="#177FF2" />
</DropdownIconUI>
</DropdownArrowsWrapperUI>
</DropdownContentUI>
</DropdownArrowsUI>
);
};
解决方案
<DropdownContentUI isOpen={isOpen}/>
如果你只是输入isOpen
,它总是正确的
推荐阅读
- python - Python Selenium 在 Inspect 中检查 Word
- python - Tensorflow 模型修剪为训练和验证损失提供了“nan”
- python - 让 python web API 一次只运行一个?
- google-apps-script - 如何使用 Javascript 在网页上阅读 Google 表格?我正在使用桌面,但它上周停止工作
- php - Woocommerce - 单击添加到购物车时同时添加插件产品和产品
- airflow - Airflow xcom 以列表格式返回一个字符串,而不仅仅是一个字符串值?
- sql - 带有间隔的日期的Oracle递归CTE
- spring-boot - NoClassDeffFoundError: org/springframework/data/jpa/repository/Repository
- django - models.E005 父模型 'xx' 中的字段 'xxx' 与父模型中的字段 'xxx' 冲突
- reactjs - 如何在 reactJS 中从 POST 请求 AJAXutil 中获取响应