[英]Styled component with react hooks
I'm using hooks with styled component. 我正在使用带有样式组件的钩子。 On click I want to display DropdownContentUI
. 单击时,我要显示DropdownContentUI
。 How to pass prop to UI component from state? 如何将道具从状态传递到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
,它将始终为true
或者,您可以在这种情况下使用条件渲染。
{isOpen && <DropdownContentUI/>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.