使用 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>
);
我的应用程序将有几个这样的编辑 View ,每个在 <SimpleForm>
中都有不同的内容。元素。然而,标题在不同的 View 中只会略有不同。
<Edit title="Edit: Language" {...props}>
<Edit title="Edit: City" {...props}>
<Edit title="Edit: Country" {...props}>
有没有什么方法可以将其定义为"template",然后将在所有编辑 View 中使用?
模板
<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);
最佳答案
您可以像这样包装 Edit 组件:
const EditTemplate = ({ title, children, ...props }) => (
<Edit title={`Edit: ${title}`} {...props}>
<SimpleForm>
{children}
</SimpleForm>
</Edit>
)
并将其用作普通编辑 View :
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>
);
关于javascript - 在 react-admin 中为 View 定义一个可重用的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54462180/