如何使用樣式化組件有條件地渲染？

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