为 react-admin 中的视图定义可重用模板

Question

使用 react-admin 我有一个 EditView 这样的：

export const LanguageEdit = props => (
  <Edit title="Edit: Language" {...props}>
    <SimpleForm>
      <TextInput source="name" label="Name" />
      <TextInput source="iso1" label="ISO-1" />
      <TextInput source="iso2" label="ISO-2" />
    </SimpleForm>
  </Edit>
);

我的应用程序将有几个这样的编辑视图，每个视图在 <SimpleForm> 元素中都有不同的内容。然而，标题在不同的视图中只会略有不同。

<Edit title="Edit: Language" {...props}>
<Edit title="Edit: City" {...props}>
<Edit title="Edit: Country" {...props}>

有什么方法可以将其定义为 "template" 然后将在所有编辑视图中使用？

模板

<Edit title="Edit: ${currentViewName}" {...props}>
  <SimpleForm>
    ${somePlaceholder}
  </SimpleForm>
</Edit>

查看内容（伪代码）

currentViewName = "Country";
somePlaceholder => (
          <TextInput source="name" label="Name" />
          <TextInput source="iso1" label="ISO-1" />
          <TextInput source="iso2" label="ISO-2" />
);
applyTemplate(currentViewName, somePlaceholder);

Answer 1

您可以像这样包装编辑组件：

const EditTemplate = ({ title, children, ...props }) => (
    <Edit title={`Edit: ${title}`} {...props}>
        <SimpleForm>
            {children}
        </SimpleForm>
    </Edit>
)

并将其用作普通编辑视图：

export const LanguageEdit = props => (
  <EditTemplate title="Language" {...props}>
      <TextInput source="name" label="Name" />
      <TextInput source="iso1" label="ISO-1" />
      <TextInput source="iso2" label="ISO-2" />
  </EditTemplate>
);

为 react-admin 中的视图定义可重用模板

Defining a reusable template for views in react-admin

javascript

reactjs

react-admin