javascript - 使用 react 钩子(Hook)将数据传递给兄弟组件？

Question

我想传递一个变量 username来自 sibling1组件到 sibling2组件并在那里显示。
Sibling1 组件:

const sibling1 = ({ usernameData }) => {
   // I want to pass the username value I get from input to sibling2 component
  const [username, setUsername] = useState(""); 

  const handleChange = event => {
    setUsername(event.target.value);
  };

  return (
    <Form.Input
        icon='user'
        iconPosition='left'
        label='Username'
        onChange={handleChange}
      />
    <Button content='Login' onClick={handleClick} />
  )
}

export default sibling1;

Sibling2 组件:

export default function sibling2() {
  return (
    <h1> Here is where i want to display it </h1>
  )
}

Answer 1

您将需要在 sibling 的 parent 中处理您的用户名。那么你可以通过 setUsername给你的 sibling 1，和userName给你的 sibling 2。当兄弟 1 使用 setUsername 时，它​​将更新您的父状态并重新渲染您的兄弟 2(因为该 Prop 已被编辑)。

这是它的样子:

const App = () => {
  const [username, setUsername] = useState('Default username');
  return (
    <>
      <Sibling1 setUsername={setUsername} />
      <Sibling2 username={username} />
    </>
  )
}

const Sibling2 = ({username}) => {
  return <h1> Helo {username}</h1>;
}

const Sibling1 = ({setUsername}) => {
  return <button onClick={setUsername}>Set username</button>;
}