0

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

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

孩子：/home/:id/device/:id/file/:id

目前我有父 CRUD 工作。正在考虑有一个操作按钮/菜单（在父 List 组件上）以将流程引入子 CRUD 组件。这是正确的方法还是其他更好的解决方案？

4

3 回答 3

1

如果这类似于演示中的客户按钮（http://localhost:3000/#/Segment），请检查源：https ://github.com/marmelab/admin-on-rest-demo/blob /master/src/segments/LinkToRelatedCustomers.js

于 2017-07-01T07:26:22.213 回答
0

我想做同样的事情并管理（或多或少）。我对解决方案并不完全满意，主要是因为我需要为<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>
);
于 2018-03-29T14:51:30.763 回答
0

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

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

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

于 2017-06-28T09:42:05.513 回答