标签: react-admin

如何隐藏React-Admin 2.2.0框架中的操作按钮？

例如,我想只隐藏导出按钮,或只显示"刷新"和"导出"按钮.

我正在尝试在 react-admin 项目中使用多个数据提供者，但出现错误：

Warning: Missing translation for key: "dataProvider is not a function"
function.console.(anonymous function) @ index.js:1452

我有我App.js这样的：

import React from 'react';
import { render } from 'react-dom';
import { Admin, Resource } from 'react-admin';
import dataProviders from './service/dataproviders';
import UserList1,  from './users1';
import UserList2,  from './users2';

const App = () => (
  render(
    <Admin dataProvider={dataProviders}>
      <Resource name="users1" list={UserList1} />
      <Resource name="users2" list={UserList2} />
    </Admin>,
    document.getElementById('root'),
  )
);

export default App;

我有dataproviders.js文件：

import simpleRestProvider from 'ra-data-simple-rest'; …

在版本 2 之前，您不能将removeprop传递给<Resource/>组件。但是，现在删除操作默认包含在<List/>视图中，我无法在文档中的任何地方找到如何禁用它。

我有一个简单的问题

是否可以按列 ID 禁用默认排序？或者至少在全球范围内改变它？

谢谢回答

编辑：

更具体地说，我有 REST API (OData)，它返回“Id”而不是“id”，因此每次使用相关组件时我都必须设置排序以防止未定义的错误。

我欢迎在相关组件中禁用默认排序的选项。

使用 React Admin 可以将过滤器添加到列表组件中。演示中可以看到这样的示例：https ://marmelab.com/react-admin-demo/#/commands

此特定组件的代码：https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orders/OrderList.js

const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
<Filter {...props}>
    <SearchInput source="q" alwaysOn />
    <ReferenceInput source="customer_id" reference="customers">
        <AutocompleteInput
            optionText={choice =>
                `${choice.first_name} ${choice.last_name}`
            }
        />
    </ReferenceInput>
    <DateInput source="date_gte" />
    <DateInput source="date_lte" />
    <TextInput source="total_gte" />
    <NullableBooleanInput source="returned" />
</Filter>));

...

const OrderList = ({ classes, ...props }) => (
<List
    {...props}
    filterDefaultValues={{ status: 'ordered' }}
    sort={{ field: 'date', order: 'DESC' }}
    perPage={25}
    filters={<OrderFilter />}
>
    <StyledTabbedDatagrid />
</List>
);

但是，我无法弄清楚将相同的功能添加到ReferenceManyField。例如，在演示网站中，这将是客户编辑组件的“订单”选项卡。有没有办法为 …

在一个react-admin项目中，我创建了自己的工具栏按钮，它应该显示一个确认对话框，类似于JavaScript警报，但不太难看。

只有当用户单击“确定”时，才会发生一些事情，在我的例子中是一些数据库操作。

React-admin 中是否有 ootb 警报对话框，或者创建一个警报对话框的简单方法是什么？我在文档中找不到有关该主题的任何内容。我尝试了 Material ui 中的警报示例（请参阅https://v1.material-ui.com/demos/dialogs/），但由于我对 React 的了解非常有限，我无法从该示例创建可重用的组件。

更新：
下面的代码片段说明了我想要做的事情：

// Definition of a toolbar button
const ActionButton = ({ handleSubmitWithRedirect, ...props }) => {
    const form = useForm();
    var formdata = form.getState().values;

    switch (formdata.status.id) {
        case 0:
            props.label = "Text for state 0";
            break;
        case 1:
            props.label = "Text for state 2";
            break;
        default:
            props.label = "Unknown state"
    }

    const handleClick = useCallback(() => {
        switch (formdata.status.id) {
            case 0:
                form.change('status', status[1]);
                break;
            case …

我想react-admin在一个项目中使用，snowpack但遇到以下错误

? snowpack failed to load node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js
  'default' is not exported by node_modules/@sheerun/mutationobserver-shim/dist/mutationobserver.min.js, imported by node_modules/ra-core/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js

我不确定这是一个错误react-admin还是它的依赖项之一，它可能可以通过更改配置来解决snowpack.config.json

繁殖步骤

使用Create Snowpack App初始化一个 Snowpack 项目

npx create-snowpack-app new-dir --template @snowpack/app-template-react --use-yarn

添加包 react-admin

yarn add `react-admin`

添加以下行 src/index.jsx

import { Admin } from 'react-admin'

运行命令以启动应用程序

npm start

会有一堆警告，如：

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

Conflicting namespaces: node_modules/ra-core/esm/i18n/index.js re-exports 'TranslationContext' from …

根据较旧的评论以及我在应用程序中遇到的情况，react-admin 可能会在重定向到并显示登录对话框之前短暂未经过身份验证时显示仪表板。

AUTH_CHECK 调用是异步的，并且响应可能会有很长的延迟。即使 AUTH_CHECK 调用的响应尚未到来，我们也选择渲染仪表板。出于性能原因，我们采用了这种策略（称为乐观渲染）。

然而，他们的演示应用程序设法暂时不显示仪表板。它立即显示登录表单。

1. 转到演示应用程序并使用 demo/demo 登录
2. 等待仪表板显示
3. 清除本地存储和cookie
4. 在浏览器控制台 (Chrome) 中减慢 CPU x6 和网络速度以减慢 3G 速度
5. 点击刷新。您看不到仪表板，但立即看到登录对话框

他们在演示应用程序中实现了什么，以实现在未经身份验证时暂时看不到仪表板？因为这也是我想在我的应用程序中实现的目标。

以下内容可能是转移注意力的内容，但如果您发现我的 authProvider 配置存在问题，导致仪表板在我的应用程序中未经身份验证时短暂显示，那么您会得到加分。

const authProvider = {
    login: ({ username, password }) => {
        return fetchUtils
            .fetchJson(`${uri}/login`, {
                method: 'POST',
                credentials: 'include',
                body: JSON.stringify({ username, password }),
            })
            .then(({ status, body, json }) => {
                if (status < 200 || status >= 300) {
                    throw new Error(body);
                }
                localStorage.setItem('me', JSON.stringify(json));
            });
    },
    logout: () …

如果我有多个不同的REST API后端（分别做不同事情的应用程序），并且我想要一个能够对由这些后端管理的实体进行CRUD的UI（基于反应管理）的应用程序，我很好奇是否可以连接react-admin来做到这一点。

我想象的不是这个（单个/全局dataProvider）：

const App = () => (
    <Admin dataProvider={simpleRestProvider('http://path.to.foo.api')}>
        <Resource name="foos" list={FooList} />
    </Admin>
);

我们可以做这样的事情（特定于资源的dataProviders）：

    const App = () => (
        <Admin >
            <Resource name="foos" list={FooList} 
               dataProvider={simpleRestProvider('http://path.to.foo.api')} />
            <Resource name="bars" list={BarList} 
               dataProvider={simpleRestProvider('http://path.to.bar.api')} />
        </Admin>
    );

无论如何，如果您对如何在react-admin中对多个后端进行REST提出了建议，我将非常感激。

我在文档中缺少一些基本的东西。当我收到 API 验证错误时，我会返回一个状态代码和消息。看起来 React-Admin 正在将状态代码转换为通用的 HTTP 错误代码。

我的错误响应。

{"error":
    {"statusCode":422,
    "name":"Error",
    "message":"User with same first and last name already on team."}
}

当我的 API 响应该响应时，我在通知框中看到“不可处理的实体”。我正在使用 SimpleForm。

我知道状态代码正在被识别，因为我已经更改了 422 并且它显示了相应的 HTTP 错误描述。

在文档中它说在你的数据提供者中抛出和错误。我已经将 Simple Rest 数据提供程序移到我的项目中，并尝试在各个地方抛出错误，但客户端没有任何变化。

https://marmelab.com/react-admin/DataProviders.html#error-format

如果您从您的 API 中自定义了错误，我很感激您提供的任何提示。谢谢。