Admin-on-Rest 如何创建自定义显示组件以添加过滤器

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

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

您可以像任何其他组件一样向显示组件提供操作。 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 文档中也有编写 reducer 的文档。

更多详情： 1) somecomp 是您需要作为 referenceInput 子级的任何组件 2) somefield 是您设置的用于在连接的过滤器组件和连接的ReferenceInput 之间传递数据的任何字段。

分手你正在做的事情。

1) 创建一个连接组件，您将其作为过滤器的子组件。这个连接的组件发射了一个 redux 'Action'，它通过 'reducer'

改变了你状态的某些部分

aor 文档中提供了有关编写操作和缩减程序的文档。

2) 创建一个 connectedReferenceInput（如上），它接收（通过 mapStateToProps）您的 connectedFilterComp 所做的状态更改。使用它，您可以为 referenceInput 创建一个变量过滤器并显示您的变量数据。

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

Admin-on-Rest 如何创建自定义显示组件以添加过滤器

Admin-on-Rest How to create a custom Show component to add Filter

admin-on-rest