通过子项的输入更改组件的状态

Question

我有三种形式 - 登录、忘记密码和注册。初始渲染用于登录组件，该组件具有忘记密码或注册按钮。单击时，按钮会呈现它们各自的组件。

我现在的状态是，我为每个要渲染的子组件分配了状态，并且按钮更改了父组件中的状态。我想将这些按钮移动到子组件，以便我可以从那里更改状态

下面是登录页面和我提到的三个组件中的两个。

export default function SigninPage() {
  const [comp, setView] = useState('signin')
  function toggleSignin(comp){
    setView('signin')
  }
  function toggleReset(comp){
    setView('reset')
  }
  function toggleSignup(comp){
    setView('signup')
  }
  return (
    <LoginStyles>
      {comp ==='signin' &&(
        <div>
          <SignIn />
        </div>
        )
      }
      {comp ==='reset' &&(
        <div><RequestReset/></div>
        )
      }
      {comp ==='signup' &&(
        <div><SignUp/></div>
        )
      }
      <button onClick={toggleSignin}>Sign In</button>
      <button onClick={toggleReset}>Forgot Password</button>
      <button onClick={toggleSignup}>Sign Up</button>

    </div>
  );
}

export default function SignIn() {
  return (
    <Form>
      <h2>Sign Into Your Account</h2>
      <button type="submit">Sign In</button>
      {/* onClick sets state to 'signup'*/}
      <a>Create a New Account</a>
      <a>Forgot Password</a>
    </Form>
  );
}

export default function RequestReset() {
  return (
    <Form    >
      {/* onClick sets state to 'signin'*/}
      <a href='/signin'>**Go back**</a>
      <h2>Request a Password Reset</h2>
      <fieldset>
        <label htmlFor='email'>
          Email
        </label>
        <button type='submit'>Request Reset</button>
      </fieldset>
    </Form>
  )
}

Answer 1

首先，我相信您应该使用路由来实现这种行为，您使用的这种方法绝对是混乱且难以遵循的。 话虽如此，我认为以下方法可以解决问题：

<LoginStyles>
  {items.map(({ id, component, isVisible }) => (
     const Component = component;
     <div key={id} hidden={!isVisible}>
       <Component onClickComponent={() => handleClick(id)}
     </div>
   ))}
</LoginStyles>

当然，您需要稍后在孩子中调用 onClickComponent，但您将拥有范围并保留 id。