僅供參考：我在 ReactJS 上使用 ES6
我有一個切換器。單擊時我需要它切換到另一側。如果單擊當前處于活動狀態的一側，則什么也不做。
這是我的示例代碼
import { useState } from 'react'
const {isLeftButton, setIsLeftButton} = useState(true);
const toggleSwitcher = () => {
setIsLeftButton(!isLeftButton)
}
const home = () => {
...
return (
<CustomSwitcher isLeftButton={isLeftButton} toggleSwitcher={toggleSwitcher} />
)
...
}
export default Home
這是里面的代碼 CustomSwitcher
const CustomSwitcher = (isLeftButton, toggleSwitcher) => {
const leftButton = () => {
if (isLeftButton !== true) {
toggleSwitcher()
}
}
const rightButton = (isLeftButton, toggleSwitcher) => {
if (isRightButton === true) {
toggleSwitcher()
}
}
return (
<div>
<CustomButton onClick={LeftButton}>Left Button</CustomButton>
<CustomButton onClick={rightButton }>Right Button</CustomButton>
</div>
)
}
export default CustomSwitcher
但是我收到了這個錯誤
TypeError: toggleSwitcheris not a function
12 | const CustomSwitcher = () => {
13 |
14 | if (leftButton !== true) {
> 15 | toggleSwitcher()
| ^ 16 | }
17 | }
18 |
據我了解，當將函式傳遞給組件時。函式不再是函式。
而且我不認為我的代碼很好。如果你能想到一個更好的方法來做到這一點。請貢獻。
uj5u.com熱心網友回復：
您沒有使用正確的方式來訪問道具。
嘗試更換
const CustomSwitcher = (isLeftButton, toggleSwitcher) => {
和
const CustomSwitcher = ({isLeftButton, toggleSwitcher}) => {
uj5u.com熱心網友回復：
const CustomSwitcher = (isLeftButton, toggleSwitcher) => { ... }
不是構建組件的正確方法。
要么使用道具物件
const CustomSwitcher = (props) => {
// props.toggleSwitcher
}
或者解構道具
cost CustomSwitcher = ({isLeftButton, toggleSwitcher}) => { ... }
uj5u.com熱心網友回復：
您需要useState在功能組件內部使用。在您的情況下，在home. 不能在全域級別使用鉤子。因此，您還需要定義toggleSwitcherinside home。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/357552.html
標籤：javascript 反应 反应原生