使用 React Hooks 将数据从子组件传递到父组件
最近我接到一个挑战，要用 Hooks 实现一个简单的 React 身份验证系统。有人给我推荐了这篇文章作为示例，我发现用一行代码控制整个应用的身份验证是一个很有意思的方法。在这个演示中，我希望用户能够输入用户名来“登录”，然后网站会显示“hello, [username]”来欢迎用户。
总体布局
这个演示背后的基本思路是在根父组件中设置一个单一状态，用于保存用户身份验证信息。根据用户是否通过身份验证，加载不同版本的网站。
const App = () => {
const [user, setUser] = useState(null);
return user ? <AuthWebsite/> : <NoAuthWebsite/>
};
很简单，对吧？但是状态如何更新呢？必须有一种方法将用户信息传递到组件树的上层，以便更新存储在[用户]状态中的信息。
从子级向父级传递数据
等等，单向数据流不是 React 的核心设计理念吗？没错。而且我们不应该使用最常用的数据传递方法——props——将任何东西传递到组件树的上层。然而，我们实际上可以在父组件中设计函数，并将它们传递到下层组件树。我们可以将变量或任何其他数据作为参数传递到子组件中的函数中。
将用户名传递回组件树的子组件如下所示：
const NoAuthWebsite = ({ login }) => {
const [userName, setUserName] = useState("");
return (
<form onSubmit={() => login(userName)}>
<input
placeholder="username"
required="required"
onChange={e => setUserName(e.target.value)}
value={userName}
/>
<button type="submit">
submit
</button>
</form>
);
};
（这里的状态仅用于在表单中存储用户响应）
上面，login 被当作 NoAuthWebsite 组件的一个 prop。当用户加载网站时，该组件会向用户展示一个表单，要求用户填写用户名。用户名会被作为参数提交给 login 函数，并作为 prop 传递下去。现在，让我们在上面编写的父组件中添加 login() 函数，并将其传递下去：
const App = () => {
const [user, setUser] = useState(null);
return user ? (
<AuthWebsite logout={() => setUser(null)} user={user} />
) : (
<NoAuthWebsite login={username => setUser(username)} />
);
};
现在，我们已经将用户提交的用户名设置为 [user] 状态。如果该状态存在，我们将加载网站的授权版本。如果您注意到，我们将一个注销函数传递给了 AuthWebsite 组件，以便用户可以注销，网站可以返回到其默认（未授权）状态。不过，在这种情况下，我们不需要将子组件传递到组件树中，因为只需将 User 设置为 null 即可。我们现在可以构建授权网站组件，并使其能够使用用户名来欢迎用户：
const AuthWebsite = ({ logout, user }) => {
return (
<div>
<h2>Hello, {user}</h2>
<div className="logout_button" onClick={() => logout()}>
logout
</div>
</div>
);
};
就这样！一个简单的 Web 应用身份验证演示，通过函数将数据从子组件传递到父组件！
向我们的应用程序添加一个更有趣的例子
迎接用户的登录表单有点枯燥。让我们重新运用这些概念，让它更有趣一些，做一个Modal （模态框），或者一个弹出式的覆盖卡片，用户可以选择提交或点击退出。这些模态窗口在网络上随处可见，几乎可以用于任何用途。
实现此效果非常简单，只需使用三元组来切换 CSS 即可。使用 CSS，您可以使用“display”属性控制 HTML 元素是否显示。与第一个示例中的操作类似，二进制状态可以控制组件的 className。然后，可以将切换状态的函数传递给覆盖组件本身。
const NoAuthWebsite = () => {
const [overlay, setOverlay] = useState(false);
return (
<div className="flex_column">
<div className={overlay ? "overlay_shown" : "overlay_hidden"}>
<LoginOverlay
removeOverlay={() => setOverlay(false)}
/>
</div>
<h2>You are not Authorized</h2>
<div className="login_button" onClick={() => setOverlay(true)}>
Login
</div>
</div>
)
}
.overlay_shown {
opacity: 1;
}
.overlay_hidden {
display: none;
opacity: 0;
}
stopPropagation() 用于阻止 overlay_background div 上的 onClick 函数传播到其所有子级。如果没有它，点击模态框的任意位置都会导致 onClick 函数触发，并移除模态框。
const stopProp = e => {
e.stopPropagation()
}
const LoginOverlay = ({ removeOverlay }) => {
const [userName, setUserName] = useState("")
return (
<div className="overlay_background" onClick={e => removeOverlay()}>
<div className="overlay_card" onClick={()) => stopProp(e)}>
<form onSubmit={e => removeOverlay()}>
<input
placeholder="username"
required="required"
onChange={e => setUserName(e.target.value)}
value={userName}
/>
<button className="form_submit" type="submit">
submit
</button>
</form>
</div>
</div>
)
}
就这样！把它们连接在一起，并添加一些可视化显示来查看数据流路径后，您可以在这里查看完整的现场演示，或者在这里查看源代码。
结论
使用函数是将数据向上传递到组件树的绝佳方式。它可以用于多种用途，最显著的是基于用户在子组件中的交互/输入进行渲染。将此技巧与 React Hooks 结合使用，有助于编写美观且易于维护的代码，因为通过函数式组件和函数本身，逻辑流程更容易理解。
如果您有任何问题、意见、问题，或者只是想聊天，请随时给我留言。
文章来源：https://dev.to/pnkfluffy/passing-data-from-child-to-parent-with-react-hooks-1ji3