时间戳

首页 > 解决方案 > 使用反应钩子将数据传递给兄弟组件？

javascript - 使用反应钩子将数据传递给兄弟组件？

问题描述

我想将一个变量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>
  )
}

标签： javascriptreactjsreact-hooks

解决方案

您将需要在兄弟姐妹的父母中处理您的用户名。然后你可以传给setUsername你的兄弟姐妹1，和userName你的兄弟姐妹2。当兄弟 1 使用 setUsername 时，它​​将更新您的父状态并重新渲染您的兄弟 2（因为该道具已被编辑）。

这是它的样子：

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>;
}

推荐阅读