如何在react-admin中重用过滤器输入

Question

我想将<Input>过滤器组件作为可重用组件。所以不是:

// list.js
<Filter {...props}>
<TextInput source="abc" />
<SelectInput source="foo"  choices={[
{ id: 'bar', name: 'bar' },
{ id: 'baz', name: 'baz' },
]}/>
</Filter>

我想要:

// my-select-input.js
export const MySelectInput = props => (
<SelectInput source="foo"  choices={[
{ id: 'bar', name: 'bar' },
{ id: 'baz', name: 'baz' },
]}/>
)

// list.js
<Filter {...props}>
<TextInput source="abc" />
<MySelectInput />
</Filter>

遗憾的是，导出组件在过滤器工具栏中的位置与其他"正常"输入组件。我的怀疑是，它得到了装饰，因为它将是"正常的"。输入组件。

Answer 1

React-admin的<Filter>会自省它的子节点来构建一个过滤器名称列表。如果其中一个子节点没有source(或没有label)，那么它将无法在过滤器下拉列表中列出它。

将源设置为defaultProps的修复。

// my-select-input.js
export const MySelectInput = props => (
<SelectInput source="foo"  choices={[
{ id: 'bar', name: 'bar' },
{ id: 'baz', name: 'baz' },
]}/>
)
+MySelectInput.defaultProps = {
+ source: "foo",
+};