Question

用例是 - 我想对父母的子资源进行CRUD操作。

家长：/home/:id/device/:id

儿童：/home/:id/device/:id/file/:id

目前我的父CRUD正在运行。正在考虑使用操作按钮/菜单（在父列表组件上）将流引入Child CRUD组件。这是正确的方法还是其他更好的解决方案？

Answer 1

如果这类似于演示中细分的客户按钮（here），请检查来源：http://localhost:3000/#/Segment

Answer 2

List接受操作，理论上可以做任何事情。

https://marmelab.com/admin-on-rest/List.html#actions

但是你的用例有点不清楚。更多细节将有所帮助

Answer 3

我想做同样的事情并且管理（或多或少）。我对解决方案并不完全满意，主要是因为我需要为<Admin />指定一个初始状态。这是必需的，因为如果我直接访问子URL，则AOR/DECLARE_RESOURCES操作不会按时完成，并且父级和子级的状态为空。（任何指针都会非常感激，为什么会发生这种情况）

我有一个名为提供者的模型，可以为提供者上传多个图像。

您可以在代码示例中找到有关如何以及原因的说明。我希望这可以帮助你。

// ProviderPhoto Components

export const ProviderPhotoList = (props) => (
  // have to pass in the resource here otherwise this would be done by <CrudRoute /> but in our case
  // the <Create> and the <List> is not the child of <Resource />
  // also hasCreate=true because we want to show the new image button and filter is hardcoded with the providerId coming from the route (see below)
  <List {...props} resource="provider-photos" perPage={25} hasCreate={true} filter={{ provider: props.providerId }}>
    <ProviderPhotoGrid />
  </List>
)

export const ProviderPhotoCreate = (props) => (
  // have to pass in the resource here otherwise this would be done by <CrudRoute /> but in our case
  // the <Create> and the <List> is not the child of <Resource />
  <Create resource="provider-photos" {...props}>
    <SimpleForm>
      <ReferenceInput source="provider" allowEmpty reference="providers" validate={ required } defaultValue={props.providerId}> 
        <SelectInput optionText="name" />
      </ReferenceInput>
      <ImageInput source="photos" accept="image/*" maxSize={10*1024*1024} multiple>
        <ImageField source="src" title="" validate={ required }/>
      </ImageInput>
    </SimpleForm>
  </Create>
)

// customRoutes.js
import { Route } from 'react-router-dom';

export default [
  // few things to note here:
  //  - using render instead of component, otherwise the component gets created too early
  //  - passing in the provider (parent) ID from the route params
  //  - passing in ...routeProps (List Create Edit needs it)
  <Route exact path="/providers/:providerId/provider-photos" render={(routeProps) => <ProviderPhotoList providerId={routeProps.match.params.providerId} {...routeProps}/>} />,
  <Route exact path="/providers/:providerId/provider-photos/create" render={(routeProps) => <ProviderPhotoCreate providerId={routeProps.match.params.providerId} {...routeProps}/>} />,
];

// App.js

// hacky :(
const initialState = {
  admin: {
    resources: {
      'providers': { props: { name: 'providers' }, data: {}, list: { ids: [], params: { sort: null, order: null, page: 1, perPage: null, filter: {} }, total: 0 } },
      'provider-photos': { props: { name: 'provider-photos' }, data: {}, list: { ids: [], params: { sort: null, order: null, page: 1, perPage: null, filter: {} }, total: 0 } }
    }
  }
};

const App = () => (
  <Admin customRoutes={customRoutes} restClient={restClient} initialState={initialState}>
    <Resource name="providers" list={ProviderList} create={ProviderCreate} edit={ProviderEdit} remove={Delete} />
    {/* no list,create,edit etc... specified, we just register the resource */}
    <Resource name="provider-photos"/>
  </Admin>
);

使用admin-on-rest进行与父子相关的CRUD的推荐方法

3 个答案: