Question

你好，我有一个组件，我在 useState 中设置了一个 prop darkMode。我想使用 onDarkmodeChange={darkMode} 将其提供给子组件。这个孩子也把这个道具给了他的孩子。在切换开关中，我想使用道具 onDarkmodeChange。但是我应该如何使用它？我认为我做错了什么，因为darkMode 不再更新。

export function PageLayout({ children }) {
  const [darkMode, setDarkMode] = React.useState(false)
  return (
    <Header onDarkModeChange={darkMode} />
  )
}

export function Header({ onDarkModeChange }) {
  return (
   <ToggleSwitch {... { onDarkModeChange }} />
  )
}

export function ToggleSwitch({ onDarkModeChange }) {
  const [isToggled, setIsToggled] = React.useState(onDarkModeChange)
  return (
    <label className={styles.component}>
      <input className={styles.input} type='checkbox' checked={isToggled} onChange={() => setIsToggled(!isToggled)} />
      <span className={cx(styles.switch, isToggled && styles.isActive)} />
    </label>
  )
}

Answer 1

我认为没有必要拥有 isToggled 状态，因为它具有与 darkMode 状态相同的值。此外，我会将所有逻辑移到父级，以便两个子级都可以访问和操纵该状态，以防万一。试试这个：

export function PageLayout({ children }) {
  const [darkMode, setDarkMode] = React.useState(false)

  const switchDarkMode = () => {
    setDarkMode(currentDarkMode => !currentDarkMode)
  }

  return (
    <Header darkMode={darkMode} switchDarkMode={switchDarkMode} />
  )
}

export function Header({ darkMode, switchDarkMode }) {
  return (
   <ToggleSwitch darkMode={darkMode} switchDarkMode={switchDarkMode} />
  )
}

export function ToggleSwitch({ darkMode, switchDarkMode }) {
  return (
    <label className={styles.component}>
      <input className={styles.input} type='checkbox' checked={darkMode} onChange={switchDarkMode} />
      <span className={cx(styles.switch, darkMode && styles.isActive)} />
    </label>
  )
}

如何将函数传递给子组件并用作 useState？

1 个答案: