我想在單擊時更改 div 的顯示 -React Styled Component

Question

我正在使用樣式化組件創建一個 div。 我想在單擊按鈕時更改 div 的可見性，

const Category = () => {
  const [showCategory, setShowCategory] = useState(false)


  useEffect(() => {
    setShowCategory(false)
  }, [])
  return (
<button onClick={() => {  setShowCategory(true)}}>
   New Category
</button>
        <AdminInputStyle>
          <form>
            <form-group>
              <label>Add Category</label>
              <input type='text' />
            </form-group>
            <button>Submit</button>
          </form>
        </AdminInputStyle>

  )

}

這是樣式化的組件

const AdminInputStyle = styled.div`
  display: ${(d) => (d.showCategory ? 'show' : 'hidden')};
`

Answer 1

我有一個例子，但在這種情況下我們將使用一個按鈕。 單擊它會改變可見性。

1. 如果您希望它基於該屬性可見，則必須將屬性傳遞給樣式化組件。 在您的示例中，在這種情況下您沒有將道具傳遞給樣式化的組件，這就是組件無法檢測到它是否應該可見的原因。

2. 您將需要/可以使用styled-components庫中的css 8CBA22E28EB17B5F5C6AE2A266AZ function。 這可以幫助您根據樣式組件將具有的屬性返回 styles。 在這個例子中，我們傳遞給按鈕的屬性將被稱為visible 。

 import React from 'react'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components/macro'; const StyledButton = styled.button` border-radius: 3px; color: white; background-color: green; cursor: pointer; width: 100px; height: 50px; ${({ visible }) => { return css` visibility: ${visible? 'visible': 'hidden'}; `; }} `; export default function Button({ children, visible, onClick }) { return ( <StyledButton visible={visible} onClick={onClick}> {children} </StyledButton> ); } Button.propTypes = { children: PropTypes.node, visible: PropTypes.bool, onClick: PropTypes.func, };

您可以看到傳遞visible屬性將使按鈕能夠根據該屬性的真假來更改其 styles。 我們在返回 css function 的組件中使用 function ，這將控制visibility ZC7A628CBA2AE2A28EB16AZ.75CBA2AE2AF14Z 屬性

下面是我們如何利用按鈕並將道具從另一個組件傳遞給它； 在這個例子中只是 App.js 文件：

 import React, { useState } from 'react'; import './App.css'; import Button from './components/Button'; function App() { const [visible, setVisible] = useState(true); function handleClick() { setVisible(;visible); } return ( <div className="App"> <Button visible={visible} onClick={handleClick}> Click </Button> </div> ); } export default App;

Answer 2

您也可以嘗試這樣的事情，當您按下添加類別時顯示何時需要顯示添加類別

return (
    <>
      <button
        onClick={() => {
          setShowCategory(true);
        }}
      >
        New Category
      </button>
      {showCategory && (
        <AdminInputStyle>
          <form>
            <form-group>
              <label>Add Category</label>
              <input type="text" />
            </form-group>
            <button>Submit</button>
          </form>
        </AdminInputStyle>
      )}
    </>
  );