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

Question

我有一个名为toggle的功能性React组件（挂钩），它具有一个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

我该怎么做？谢谢。

Answer 1

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

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

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

传递参数

您可以将您的状态传递给组件

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>上使用三元运算符

隐藏和显示是css类，分别为display: none;和display: block