休息管理员 如何创建自定义 Show 组件以添加筛选器

Question

我想创建一个自定义Show组件，该组件可以利用List组件使用的Filter组件。老实说，我不知道从哪里开始。有人可以指出我正确的方向吗？

这是它在List中的使用方式：

export const LogList = (props) => (
<List {...props} perPage={100} title="Logs and Reports" filters={< FileFilter/>}>

我希望能够在这样的Show中使用它：

export const archivedShow = ({ ...props }) => (
<Show title="Log" {...props} filters={<LogFilter/>} >

Answer 1

您可以编写自定义连接的组件。然后你可以随心所欲地做。

您可以像任何其他合成一样向 show 组件提供操作。 https://marmelab.com/admin-on-rest/Show.html#actions

您可以使用此操作填充州中的字段(可能使用自定义化简器(

然后，您的组件可以连接到 redux 状态。

如下所示的内容

class connectedReferenceInput extends Component {
render() {
<ReferenceInput source={this.props.source} >
<somecomp>
</ReferenceInput>
}
}
function mapStateToProps(state, props) {
return {
source: state.admin.somefield.source
};
}
export default connect(mapStateToProps, {
crudGetList: crudGetListAction
})(ClientInput)

在AOR文档中还有用于编写化简器的文档。

更多详情： 1( somecomp 是您需要作为引用输入的子组件的任何组件 2( somefield 是您设置为在连接的过滤器组件和连接的参考输入之间传递数据的任何字段。

分解你正在做的事情。

1( 创建一个连接的组件，您将使其成为过滤器的子级。这个连接的组件会触发一个 redux "Action"，通过"reducer"改变你的状态的某些部分

aor 文档中提供了用于编写操作和化简器的文档。

2(创建一个connectedReferenceInput(如上所述(，它接收(通过mapStateToProps(您的connectedFilterComp所做的状态更改。使用此功能，您可以创建用于引用输入的变量过滤器并显示变量数据。

你基本上是使用 redux 在过滤器和组件之间传递数据。