您可以用钩子添加一个组件吗?

Question

我有一种模式，我用来允许编辑具有大量离散节的单个页面。这比将它们传递到表格更为用户友好 - 表格将是巨大的。

页面上的各个部分有所不同。有些是简单的文本，简单的文本或输入就足够了。尽管只能使用Select(或可以想象的多个选择(编辑一些数据。

对于Textareas，我使用以下内容：

/* 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>
        )}

文本形式只是一个函数：

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

我看不到将函数分配为对象属性的任何问题。一直发生。

当然，真正有趣的部分是我如何使用文本形式。我将dialog值作为Props传递给Dialog组件：

<Dialog {...dialog} />

以及在我需要表格的对话框的部分中，我使用 TextForm用 createElement

渲染表单

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