在React中的高阶组件中发出接收参数

Question

我想调整一些关于React设计模式的教程提供的演示，主题：高阶组件。

在代码中，userId的参数"2"在组件内部被硬编码，并且可以在组件UserInfoForm的最后一行中找到。

我的问题是：我如何在这里使用一个参数，这样调用时可以将其发送到withEditableUser HOC？

withEditableUser(UserInfoForm, 4);

如有任何帮助、提示和其他来源，我们将不胜感激。

这是带有硬编码参数的HOC：

import {withEditableUser} from './withEditableUser';
export const UserInfoForm  = withEditableUser(({ user, onChangeUser, onSaveUser, onResetUser }) => {
const { name, email, username } = user || {};
console.log(user)
return user ? (
<>
<label>
Name:
<input value={name} onChange={e => onChangeUser({ name: e.target.value })} />
</label>
<label>
Email:
<input value={email} onChange={e => onChangeUser({ email: e.target.value })} />
</label>
<label>
Username:
<input value={username} onChange={e => onChangeUser({ username: e.target.value })} />
</label>
<button onClick={onResetUser}>Reset</button>
<button onClick={onSaveUser}>Save Changes</button>
</>
) : <p>Loading...</p>;
}
, '2');

Answer 1

当您实现HOC时，它将是一个可共享的组件，因此，

最好将变量作为道具发送到组件

它的工作方式是，首先你的所有道具都将由HOC接收，而不是从HOC接收。如果孩子需要，你必须将这些道具转发给孩子组件。

举个例子，你可以看看

将道具从HOC传递给子

从路线通过HOC的道具