你能用 Hooks 添加一个组件到 state 吗？

Question

我有一个模式，可以用来编辑包含许多独立部分的页面的各个部分。这比将它们传递给表单要方便得多 - 表单会很大。

页面上的部分有所不同。有些是简单的文本，一个简单的文本区域或输入就足够了。有些数据虽然只能使用 select（或者可以想象的多个 select）进行编辑。

对于文本区域，我使用以下内容：

/* inplace-edit dialog */
const [dialog, setDialog] = useState({
    open: false, // whether dialog should show
    fieldName: null, // reference to field for db update on submit
    title: '', // dialog title
    content: '', // data to show in dialog content
})

const setDialogState = update => () => {
  setDialog({ ...dialog, ...update })
}

由于功能组件本质上是一个功能，将该组件添加到状态是否可行然后在对话框需要时使用该组件呈现特定的表单结构显示？

Answer 1

我做了更多调查，使用挂钩将无状态组件添加到状态似乎是可行的。

我已将状态处理代码修改为：

  const [dialog, setDialog] = useState({
    open: false,
    title: '',
    formComponent: () => null,
  })

  const setDialogState = update => () => {
    setDialog({ ...dialog, ...update })
  }

上面的formComponent只是一个默认函数，returns为null。

在我要编辑的页面部分中，有一个布尔值 showEditIcons，如果查看者具有适当的权限，它会显示编辑图标。单击该图标时，它会设置状态。最重要的是，它将 formComponent 设置为对无状态函数的引用：

        {showEditIcons && (
          <IconButton
            onClick={setDialogState({
              open: true,
              title: 'Project Summary',
              formComponent: TextForm,
            })}
          >
            <EditIcon />
          </IconButton>
        )}

其中 TextForm 只是一个函数：

const TextForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <Field name="content">{({ field }) => <TextArea field={field} />}</Field>
  </form>
)

我没有发现将函数分配为对象有任何问题属性。经常发生。

当然，真正有趣的部分是我如何使用 TextForm。我将 dialog 值作为道具传递给 Dialog 组件：

<Dialog {...dialog} />

并且在我需要表单的对话框部分，我使用 TextForm 来呈现带有 createElement

的表单

  <DialogHeader>{title}</DialogHeader>
    <DialogContent>
      {React.createElement(formComponent)}
    </DialogContent>
  <DialogFooter ... />

你能用 Hooks 添加一个组件到 state 吗？

Can you add a component to state with Hooks?

javascript

reactjs

react-hooks