我正在使用樣式化組件創建一個 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')};
`
uj5u.com熱心網友回復：
您也可以嘗試這樣的事情，當您按下添加類別時顯示何時需要顯示添加類別
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>
)}
</>
);
uj5u.com熱心網友回復：
我有一個例子，但在這種情況下我們將使用一個按鈕。單擊它會改變可見性。
如果您希望它基于該屬性可見，則必須將屬性傳遞給樣式化組件。在您的示例中，在這種情況下您沒有將道具傳遞給樣式化的組件，這就是組件無法檢測到它是否應該可見的原因。
您將需要/可以使用庫中的
css函式styled-components。這可以幫助您根據樣式組件將具有的屬性回傳樣式。在這個例子中，我們傳遞給按鈕的屬性將被呼叫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道具將使按鈕能夠根據該屬性是真還是假來改變其樣式。我們在組件中使用一個回傳 css 函式的函式，這將控制visibilitycss 屬性。
下面是我們如何利用按鈕并將道具從另一個組件傳遞給它；在這個例子中只是 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;僅供參考：對于 css；你不想要display: hidden;。hidden是顯示道具的無效值。display: none;如果您不希望元素位于 DOM 中，您會想要。visibility: hidden;將元素添加到 DOM，但它不可見。您可以使用最適合您的情況的方法????
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419385.html
標籤：
上一篇：如何固定側面彈出視窗
下一篇：如何從剪輯元素中洗掉空格？