标签: react-admin

有什么方法可以自定义DeleteButton按钮react-admin以添加确认消息，例如“您要删除项目吗？”。目前点击DeleteButton它会直接删除该项目，而无需确认。我尝试title为删除按钮添加属性，但它没有被触发。这是我的代码

//This worked with admin-on-rest, but not working with react-admin
const CategoryDeleteTitle = translate(({ record, translate }) => <span>
        {translate('Delete')}&nbsp;
        {record && `${record.code} ${record.name}`}
    </span>);

const EditActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <ListButton basePath={basePath} />
        <DeleteButton title={<CategoryTitle />} basePath={basePath} record={data} resource={resource} />

    </CardActions>
);

export const CategoryEdit = (props) => (
    <Edit actions={<EditActions />} title={<CategoryTitle />} {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <TextInput source="name" /> …

我有一个自定义路线：

  <Route
    exact
    path="/assetsBulkCreate"
    component={ComponentWithPermissions(AssetsBulkCreate)}
  />

它用于批量创建资产：

export const AssetsBulkCreate = ({permissions, ...props}) => {
  return (
    <Create
      resource="assets/bulkInsert"
 ...

这有效。

但是，在我们点击保存后，页面被重定向到仪表板。

我想将它重定向到list资源的assets（这是一个不同的资源）。

如何才能做到这一点？

PSredirect道具不允许我们指定不同的资源，所以我不能list在那里用作值（它甚至不起作用，因为自定义路由没有列表）。

我使用 GraphQL-Yoga 作为后端。
它返回的错误的格​​式与文档不匹配。但我需要他们的翻译。是否有一个地方React -admin可以捕获来自服务器的所有错误并按照 Notification 组件的预期进行处理？

Error:{
    extraInfo: undefined
    graphQLErrors: {
        locations: [{ column: 3, line: 2 }]
        message: "User with such login does not exist."
        path: ["login"]
    }
    message: "GraphQL error: User with such login does not exist."
    networkError: null
    stack: "Error: GraphQL error: User with such login does not exist.?    at new ApolloError (http://localhost:3000/static/js/1.chunk.js:39388:24)?    at Object.next (http://localhost:3000/static/js/1.chunk.js:38008:21)?    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)?    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)?    at SubscriptionObserver.next (http://localhost:3000/static/js/1.chunk.js:270828:7)?    at Object.next (http://localhost:3000/static/js/1.chunk.js:47919:22)?    at notifySubscription (http://localhost:3000/static/js/1.chunk.js:270732:18)?    at onNotify (http://localhost:3000/static/js/1.chunk.js:270776:3)? …

我正在使用react-admin并且我正在使用他们Create使用TextFieldfrom的组件@material-ui/core。

当然，我已经阅读了此处的文档。

我想完全自定义自定义视图的渲染，这是生成的 html 的外观：

<div class="create-page Component-root-55" notification="">
   <div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53">
      <form class="simple-form" locale="en">
         <div class="MuiCardContent-root-86 CardContentInner-root-85">
            <div class="ra-input ra-input-email">
               <div class="MuiFormControl-root-11 MuiFormControl-marginNormal-12 MuiFormControl-fullWidth-14" locale="en">
                  <label class="MuiFormLabel-root-20 MuiInputLabel-root-15 MuiInputLabel-formControl-16 MuiInputLabel-animated-19" data-shrink="false" for="email"><span>Email *</span></label>
                  <div class="MuiInput-root-27 MuiInput-fullWidth-34 MuiInput-formControl-28 MuiInput-underline-31"><input aria-invalid="false" class="MuiInput-input-35 MuiInput-inputType-38 withRouter-Connect-SubscribeNewsletterForm---inputType-52" id="email" name="email" type="email" value=""></div>
               </div>
            </div>
         </div>
         <div class="MuiToolbar-root-97 MuiToolbar-regular-99 MuiToolbar-gutters-98 Toolbar-toolbar-92 Toolbar-desktopToolbar-93" role="toolbar">
            <div class="Toolbar-defaultToolbar-95">
               <button tabindex="0" class="MuiButtonBase-root-129 MuiButton-root-103 MuiButton-contained-114 MuiButton-containedPrimary-115 MuiButton-raised-117 …

我需要制作在RTL中使用material-ui的react-admin，到目前为止没有任何效果，因为每个元素上都有覆盖dir="rtl"body标签的样式，创建一个自定义主题，例如：

const theme = {
  direction: 'rtl',
  isRtl: true
};
const themeWithDirection = createMuiTheme({...defaultTheme, ...theme});

并在管理组件上使用它，例如：

<Admin locale="ar" dataProvider={dataProvider} i18nProvider={i18nProvider} theme={themeWithDirection} layout={layout}>

不工作。在自定义布局上使用也StyleProvider不起作用：

import React from 'react';
import { Layout } from 'react-admin';

import { create } from 'jss';
import rtl from 'jss-rtl';
import {  jssPreset } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/core/styles';

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const MyLayout = props => 
  <StylesProvider jss={jss}>
    <Layout
      {...props}
    />
  </StylesProvider>;

问题是像TextField …

我正在尝试使用react-admin作为我的管理面板，并使用ra-data-graphql-simple从graphql API中获取。问题是它找不到我的资源，我收到此错误：

Unknown resource Category. Make sure it has been declared on your server side schema. Known resources are

这是我的代码。

应用程序.js

import React, { Component } from 'react';
import buildGraphQLProvider from 'ra-data-graphql-simple';
import { Admin, Resource, Delete, ListGuesser  } from 'react-admin';

import apolloClient from './apolloSetup';

import { CategoryList } from './categories';

class App extends Component {
    constructor() {
        super();
        this.state = { dataProvider: null };
    }
    componentDidMount() {
        buildGraphQLProvider({ clientOptions: { uri: 'http://127.0.0.1:3434/graphql' }})
            .then(dataProvider => …

在缓存文件中提到，我可以添加一个代理给dataProvider让我响应缓存X秒，而非被动反应，管理员刷新他们在每一页上的变化。但是，对于我的用例（股票交易应用程序），我希望每 1 秒从我的 API 为我的列表视图获取新数据。我希望通过使用上面的缓存方法来做到这一点，但看起来如果用户在页面上时缓存过期，页面将不会自动刷新。

如何让我的 React-Admin 列表视图每 X 秒刷新一次，或者在缓存到期时自动刷新？

使用 React Admin 我正在为我的一个客户创建一个仪表板，我有一个要求，我必须添加客户的产品，在许多字段中，也有一个 Image 字段，我必须上传在其中提供的图像API 和产品是使用 react-admin 的 CREATE 创建的。

// create product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const CreateProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Create resource="products" basePath="/products">
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image …

有没有办法整体禁用分页？我希望我的所有记录都显示在一个长列表中，而不是分成几页。我现在正在使用 ListGuesser，我已经尝试过 List 和 ListGuesser，但我无法禁用分页。实际上 react-admin 期望来自服务器端的 X-Total-Count 并且我不想引入分页，但我必须在标题中传递它以使其工作。那么有没有办法禁用分页？

<Resource name="posts" list={ListGuesser} edit={EditGuesser}/>

使用带有自定义查询的 Datagrid 组件时收到以下错误。下面的代码适用于3.3.1 版的react-admin，而不适用于 3.8.1 版

类型错误：无法读取未定义的属性“包含”

浏览器的控制台信息：必须在 <ListContext.Provider> 中使用列表组件。依赖 props 而不是 context 来获取 List 数据和回调已被弃用，并且在 react-admin 的下一个主要版本中将不支持。

请参阅：https: //marmelab.com/react-admin/List.html #Tip：您可以将 Datagrid 组件与自定义查询一起使用：

import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading } from 'react-admin'

const CustomList = () => {
    const [page, setPage] = useState(1);
    const perPage = 50;
    const { data, total, loading, error } = useQuery({
        type: 'GET_LIST',
        resource: 'posts',
        payload: {
            pagination: { page, perPage },
            sort: { field: …