Question

我有一个模态，可以用来编辑具有很多离散部分的页面的各个部分。这比将它们传递给表单要方便得多-表单将是巨大的。

页面上的各个部分有所不同。一些是简单的文本，简单的文本区域或输入就足够了。不过，某些数据只能通过选择（或可能是多次选择）进行编辑。

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

/* 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中，它只是一个返回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声明的组件吗？

1 个答案: