如何使用样式化组件有条件地渲染？

Question

我有一个名为toggle的功能性反应组件（钩子），它有一个button组件，单击时会切换<styledTitle> （ styled-components ）的可见性。 它看起来像这样：

const Toggle = () => {
    const styledTitle = styled.h1`
        //some styles
        //SUDO CODE: display none if toggle === true else block
    `;
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>
    <styledTitle>Text</styledTitle>
}

我希望styledTitle display: none如果toggle的值为true ，则显示：无，否则display: block

我怎样才能做到这一点？ 谢谢是提前。

Answer 1

您可以使用道具将条件 styles 添加到您的样式组件。

还要在功能组件之外定义样式组件，以确保创建单个实例

const StyledTitle = styled.h1`
    display: ${props => props.visibility? 'block': 'none'}
`;

const Toggle = () => {

    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }

    ...
    <button onClick={handleToggle}>Click me</button>
    <StyledTitle visibility={toggle}>Text</StyledTitle>
}

Answer 2

传递参数

您可以将您制作的 state 传递给组件

const Toggle = () => {
    const styledTitle = styled.h1`
        //some styles
      display: ${({toggle}) => toggle ? 'none' : 'block'};
    `;
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>
    <styledTitle toggle={toggle}>Text</styledTitle>
}

优化

就像 Shubham 在他的回答中所说，您应该重命名变量并使样式化的组件成为一个单独的东西。

// notice the name now in pascal case, components should always be in pascalcase
const StyledTitle = styled.h1`
  display: ${({isHidden}) => toggle ? 'none' : 'block'};
`;


const Toggle = () => {
    const [toggle, setToggle] = useState(false)
    const handleToggle = () => {
        setToggle(!toggle)
    }
    <button onClick={handleToggle}>Click me</button>

    // see the prop name here, isHidden, this is better than toggle as a prop
    <StyledTitle isHidden={toggle}>Text</StyledTitle>
}

Answer 3

您可以在 className <styledTitle className={toggle? "hide": "show"}>Text</styledTitle> <styledTitle className={toggle? "hide": "show"}>Text</styledTitle>

隐藏和显示是 css class 分别display: none; 并display: block