[英]How to change icons with React Spring?
當我用反應 spring 單擊它時,我想更改圖標。 例如,當我點擊“”時,它會變成“”。 在 react spring 的文檔中,可以使用過渡道具來實現,但是如何使用 onClick 切換它?
https://www.react-spring.io/docs/props/transition
以下代碼由反應 spring 提供
<Transition
items={toggle}
from={{ position: 'absolute', opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}>
{toggle =>
toggle
? props => <div style={props}>😄</div>
: props => <div style={props}>🤪</div>
}
</Transition>
創建一個按鈕並在單擊時更改toggle
值:
function App() {
const [toggle, setToggle] = React.useState(false);
return (
<>
<button onClick={() => setToggle(!toggle)}>toggle</button>
<Transition
items={toggle}
from={{ position: "absolute", opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}
>
{toggle =>
toggle
? props => <div style={props}>😄</div>
: props => <div style={props}>🤪</div>
}
</Transition>
</>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.