在React-Admin中保存自定义组件的更改
是指在使用React-Admin进行开发时，如何保存对自定义组件的修改。
React-Admin是一个基于React和Material-UI的开源框架，用于快速构建管理界面。它提供了一套丰富的组件和工具，可以帮助开发者快速搭建功能完善的后台管理系统。
要保存自定义组件的更改，需要按照以下步骤进行操作：
- 创建自定义组件：首先，根据项目需求，创建一个自定义组件。可以是一个表单字段、一个列表项、一个过滤器等等。自定义组件可以通过继承React-Admin提供的基础组件来实现，也可以完全自定义。
- 注册自定义组件：在React-Admin的配置文件中，通过注册自定义组件的方式告诉React-Admin该组件的存在。这样React-Admin才能正确地渲染和使用该组件。
- 使用自定义组件：在需要使用该自定义组件的地方，将其作为React-Admin提供的组件的属性进行传递。可以是一个表单字段的input组件、一个列表项的render函数、一个过滤器的filter组件等等。
- 进行修改：根据实际需求，对自定义组件进行修改。可以修改组件的样式、交互逻辑、数据处理等等。
- 保存更改：在修改完成后，需要将修改后的自定义组件保存起来。可以通过版本控制工具（如Git）将代码提交到代码仓库中，以便后续的使用和维护。
React-Admin提供了丰富的文档和示例，可以帮助开发者更好地理解和使用自定义组件。在React-Admin的官方文档中，可以找到详细的教程和示例，以及对应的API文档和组件库。
腾讯云提供了云计算相关的产品和服务，可以帮助开发者快速构建和部署React-Admin应用。其中，推荐的产品包括云服务器CVM、云数据库MySQL、对象存储COS等等。具体的产品介绍和文档可以在腾讯云的官方网站上找到。
总结起来，在React-Admin中保存自定义组件的更改需要创建、注册、使用和修改自定义组件，并将修改后的代码保存起来。腾讯云提供了相关的产品和服务，可以帮助开发者构建和部署React-Admin应用。
相关·内容
1回答
我有画布编辑器组件，它在react-admin的SimpleForm中为我提供base64图像数据，如何将图像文件上传到服务器？我正在使用数据提供程序：
<Create {...props}>
<SimpleForm>
<TextInput source='location_name'/>
<EditorComponent />
</SimpleForm>
</Create>
我是新的react和react-admi
浏览 1提问于2019-10-19得票数 0
我知道react-admin中的自定义主题过程。 我想知道在react-admin中是否有可能实现一个自定义的主题，而不需要一个接一个的组件和我们自己的主题化。例如，Material Ui premium themes (see here)
浏览 29提问于2021-09-27得票数 0
1回答
如何让react-admin在snackbar上显示多行通知/错误消息？ 具有以下dataProvider： export default (type, resource, params) => {
throw new Error(`
Message line 1.
Message line 2.
Message line 3.
`);
}; 它在加载List组件时显示单行消息： error notification screenshot
浏览 14提问于2019-08-29得票数 2
回答已采纳
我有以下场景:使用react-admin基础结构，对于资源，我有以下编辑视图：
import Editor from "react-simple-code-editor";
export const CodeQuestionEdit = props => (
<Edit {...props}>
<SimpleForm>
<LongTextInput source="text" />
<TextField label="Code Block" />
浏览 15提问于2019-11-08得票数 0
我最近开始使用react-admin，遇到了notify的问题。添加注册的自定义路由，noLayout属性，期望通知在发生事情时向我显示消息。Notify不会在屏幕上显示消息。它可以在其他一些非自定义的页面中工作。如果有人知道这里的问题是什么，tnx。
浏览 20提问于2021-10-14得票数 0
我在react-admin中使用或FileInput时遇到问题。 我使用了multiple= false或没有使用多个 <ImageInput
source="picture"
multiple={false}
</ImageInput> 我检查了图片，得到了 picture: {
rawFile: "....",
url: "...",
title: "..."
} 但是我用multiple=true上传了很多图片 <ImageInput
source="
浏览 17提问于2020-04-20得票数 1
我正在尝试访问react-admin项目中的刷新按钮。我尝试使用getElementsbyClassName，它返回HTMLComponents对象，但它无法访问，即我可以在将其打印到控制台时看到组件，但无法通过代码访问。有没有办法在我想要的任何地方禁用这个刷新按钮？
浏览 15提问于2021-04-26得票数 0
回答已采纳
我正在创建一个使用Nextjs的React应用程序。 我真的想对我的BO使用react-admin。我试过test example，和react配合使用，它工作得很好。不幸的是，虽然我试图在next js中包含一些代码，但它不能工作。 我创建了/admin/dashboard.tsx文件，并添加了下一步代码(之前我自己测试过-工作代码)： import * as React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@mater
浏览 30提问于2021-01-08得票数 11
通过使用React-admin，我使用了ShowController组件，它让我可以更自由地定制ShowView。然而，我希望继续看到TextFields中的标签，但是，它们已经消失了。 这段代码显示了我是如何使用标签的，并且，它部分工作:只显示记录值，而不显示标签(我也尝试了没有道具“ShowController”，它也不起作用)。 const OrderShow = props => {
return (<ShowController {...props}>
{controllerProps => {
return
浏览 16提问于2019-01-17得票数 1
回答已采纳
reac-admin alert dialog example 我正在开发一个使用React-admin的管理员。我尝试设置警告对话框的样式，在页面中显示错误、警告和成功消息。例如，我想在这个警报中设置一些css，比如z索引、背景颜色……我已经在Material UI中看到了如何定制组件的文档，但问题是在react-admin中这个组件看起来是本机的，而我在react-admin中找不到任何关于我的问题的信息。我很感谢你的帮助。问候
浏览 15提问于2019-12-11得票数 1
回答已采纳
在react-admin的复杂选项卡式表单中，我需要有两个提交按钮，一个是常规保存按钮，另一个用于更改“状态”字段(前进一个工作流步骤)和保存表单。 只有当用户填写了所有必填字段时，保存按钮才会变为活动状态。另一个按钮根据包含当前工作流步骤的记录中的"status“字段更改其文本，并且仅当当前工作流步骤的表单验证通过时才处于活动状态。 因此，我需要一个动态按钮或几个按钮，显示和隐藏取决于“状态”字段。我认为动态按钮将是更优雅的解决方案。 下面你可以看到我目前拥有的代码，它或多或少是从react-admin文档中复制过来的。我还需要添加一个自定义的保存按钮，但它只是一个子集，当Adva
浏览 17提问于2020-01-30得票数 4
在react-admin 组件验证中，当我单击“保存”按钮时，它可以正常工作。当我单击“保存”按钮时，需要的字段将被高亮显示并标记为红色。
只要表单无效，我想将一个className添加到SaveButton中。这样，我就可以向用户清楚地表明，他还没有完成表单的操作，并阻止用户单击表单。
这是这样一个SimpleForm的简化版本。
import {
required,
//...
} from 'react-admin';
const UserCreateToolbar = props =>
<Toolbar {...props}>
浏览 1提问于2018-06-18得票数 4
回答已采纳
在react-admin上onSuccess函数不能正常工作，
我的代码：
const onSuccess = () => {
redirect('list', props.basePath);
};
<Edit
onFailure={onFailure}
onSuccess={onSuccess}
title="Ediar Usuário"
{...props}
>
<SimpleForm
variant="standard"
toolbar={<
浏览 4提问于2020-07-11得票数 5
在使用TabbedForm时，有没有办法有条件地删除特定选项卡中的提交按钮(工具栏)？(react-admin)
浏览 1提问于2018-04-29得票数 4
如何在react-admin中创建子菜单，因为在admin-on-rest中，我可以在MenuItem组件中使用适当的menuItems。对于这种情况，react-admin也有同样的支持吗？
我尝试创建我自己的组件，但在全局中为给定列表名称设置了适当的主属性，我的应用程序总是显示错误: Uncaught : Cannot read property '@global‘
谢谢
浏览 0提问于2018-11-16得票数 6
我是个新手，所以请直接跟我说:/
目前，我正在尝试构建React-Admin，所以我按照说明进行了操作：
yarn create react-app test-admin
cd test-admin/
yarn add react-admin ra-data-json-server prop-types
yarn start
我还在package.json中添加了“主页：".”；
接下来，我输入了"yarn build“。
我已经尝试了所有可能的方法来修复这个问题，但是我一直收到消息"Edit src/App.js and save to reload“。(在上)；
这
浏览 10提问于2021-03-06得票数 0
我正在使用React-Admin，并且在我的数据库中有一个包含换行符(\n)的字段。当我在如下所示的页面上输出时： <TextField source="extra_details" /> 换行符将被忽略，所有内容都会一起运行。如何才能正确显示换行符？ 谢谢
浏览 11提问于2019-05-02得票数 3
这就是在react-admin中实例化组件的方式，但是现在我需要在PostList和UserList之间共享notifications实例。我想避免使用单件对象。有没有可能以某种方式将“通知”对象传递给列表？ import React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/People';
import { Admin, Resource } from 'react-ad
浏览 11提问于2020-07-18得票数 4
回答已采纳
在尝试使用react-admin官方文档中的自定义login页面时，我遇到了这个错误。
index.js:1 Warning: Failed prop type: The prop `theme` is marked as required in
`ThemeProvider`, but its value is `undefined`.
在MyLoginPage.js中，我有以下代码
import * as React from 'react';
import { useState } from 'react';
import { useLogin, useN
浏览 0提问于2020-07-29得票数 4
因此，我使用的是react-admin https://marmelab.com/react-admin，并且每当我在create函数上发送文件时，我都希望显示上传进度。 import React from "react";
import { Create, SimpleForm, FileInput, FileField } from "react-admin";
export const PostFile = props => (
<Create {...props}>
<SimpleForm>
&l
浏览 56提问于2019-10-04得票数 2
我正在尝试将<Query>组件集成到我的代码中，但是我得到了以下错误。
./src/component/promos/PromosCreate.js
54:6-11 'react-admin' does not contain an export named 'Query'.
我在PromosCreate.js中的所有导入语句
import React, { Component, Fragment } from 'react';
import {
Create,
DateInput,
TextInput,
Long
浏览 0提问于2019-03-14得票数 0
回答已采纳
我正在使用react-admin。
我将<DashboardMenuItem>替换/更改为<MenuItemLink> (概述)。
不幸的是，这个“概述”总是出现在active上。
知道当另一个菜单项被选中时如何禁用它吗？
在所附图片中，请注意“概述”和“评审”似乎被选中(active)
// Removed this line...
- <DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />
// And replaced it with this...
+ &l
浏览 3提问于2020-03-16得票数 3
当我尝试通过以下代码在我的仪表板组件上使用react-admin组件时(我假设这是唯一相关的行)：
import { ReferenceInput, AutocompleteInput } from "react-admin";
<ReferenceInput source="id" reference="buildings">
<AutocompleteInput source="ProjectName" />
</ReferenceInput>
我得到以下错误：“错误:字段必须在用re
浏览 2提问于2018-08-20得票数 2
1回答
我正在尝试建立一个带有react-admin的web应用程序，需要将数据推送到redux商店。我阅读了React-admin文档(https://marmelab.com/react-admin/Actions.html)，当我尝试这样做时，我得到了失败。 ? 以下是我的代码 import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withStyl
浏览 25提问于2019-02-10得票数 3
我正在使用React-Admin，我需要使用/创建一个组件来剪切图像(配置文件图像)并将其存储为base64 64映像。我发现@toast-ui/react-image-editor比其他库更好，但我对此有一个问题。在React-Admin中，当我们像这样使用ImageInput时：
<ImageInput multiple label="Gallery" source="gallery" accept="image/*">
<ImageField source="src" title="titl
浏览 4提问于2020-01-16得票数 0
回答已采纳
我想在React-Admin中将每个页面的标题更改为自定义。在Recorse、list、edit或create组合中是否有特定的属性？请给我指引，谢谢 enter image description here
浏览 15提问于2020-04-24得票数 2
1回答
我怎样才能从反应管理中移除肚脐？
、、、、
我有一些问题，试图删除/删除默认导航栏从。
正如您所看到的，我的原始Navbar位于react admin导航栏的底部，如果我检查并删除它，它将如下所示：
邮政，帐户，和个人资料图标被按下。这只是当我删除了整个班的蓝色肚脐。你在这里看到的是我真正想要达到的目标。
到目前为止这是我的代码：dashboard.js
import React, { useState, useEffect } from 'react';
import { requireAuth } from 'util/auth.js';
import users from '
浏览 4提问于2021-09-23得票数 1
回答已采纳
2回答
我想从react-admin创建一个‘克隆’按钮，它将允许我克隆/复制现有的数据记录到另一个记录中，并将打开一种编辑表单来编辑它们并创建一个新的条目。我该怎么做呢？
附言:我正在使用Typescript
目前我的代码是这样的
<Datagrid rowStyle={modelRowStyle}>
<TextField source="format" />
<TextField source="status" />
<EditButton basePath="/models" /&g
浏览 0提问于2018-05-31得票数 3
我想通过后端的其他进程(react-admin之外)通知用户特定的记录发生了变化。 例如，订单的状态发生更改，我想立即在react-admin中通知对该订单感兴趣的用户。 有没有人有在react-admin中做这件事的经验？有没有内置的方法可以做到这一点？如果没有，有没有什么资源可以让我回顾一下来实现它？ 谢谢你的帮助。
浏览 27提问于2019-09-20得票数 3
我正在使用react-admin，我想在另一个组件中显示所选的图像。
我的编辑屏幕上已经有了一个图像。当我用ImageInput选择一个新的图像时，我想在我的<Poster />组件中显示它，并用新的图像更改现有的图像。
<Poster id="poster" {...props} source="card_image_path"
label="resources.cards.fields.card_image_path" />
<ImageInput id="imageInput" source
浏览 5提问于2018-12-03得票数 2
我尝试在侧栏样式中使用不同的属性来覆盖链接颜色，但是没有任何效果。
默认样式/边栏抽屉颜色(在重写样式之前)
MySidebar.js
// MySidebar.js
import { Sidebar } from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
const useSidebarStyles = makeStyles({
drawerPaper: {
浏览 4提问于2020-12-03得票数 0
回答已采纳
我试图在React-admin的列表视图中呈现动态生成的字段。只要我们将每个字段硬编码传递给Datagrid，它就工作得很好，但我想显示字段(TextField、DateField等)。动态地基于每个字段的类型。
为此，我创建了一个名为<RenderType/>的组件，它将具有每行字段的对象作为支撑，并动态返回React-admin组件(TextField、DateField )，但它不会显示在不同的列中，但它会将所有结果放在一列中。
import React from 'react';
import { List, Datagrid, TextField, Edi
浏览 1提问于2019-12-13得票数 2
3回答
我想在react-admin中使用一张图片作为登录页面的背景图片，我该怎么做？
附言:我正在使用TypeScript
浏览 156提问于2018-06-20得票数 5
回答已采纳
我正在尝试使用名为'UserRolesSelect‘的自定义输入字段在React-Admin中构建一个编辑表单，该字段显示来自一个单独的角色端点的角色列表，其中当前用户的角色被选中。但是，在发出编辑请求时，表单数据中的自定义输入的值不会更新。我已经提供了上述两个端点的示例响应。 // sample response for getting user details by ID
const user = {
id:1,
name:'User1',
email:'user1@user.com',
created_at:2020-04-01T10:43:36
浏览 12提问于2020-04-01得票数 1
我正在使用react-admin框架。我编写了自定义组件，该组件在materialUI GridList中显示图像。如果用户悬停在特定的useState上，我必须实现Button函数来确定显示哪些元素。但是，在实现useState之后，应用程序崩溃时会出现以下错误：
Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
我的代码：
const [mouseOver, setMouseOver] = useState(false);
const
浏览 0提问于2020-06-17得票数 1
2回答
首先我得说，我真的很喜欢react-admin。这是一个很棒的包！
但我的问题是:如何将属性从SelectInput传递给我的数据提供程序？
我在ReferenceInput中有一个SelectInput和一个自定义的添加和删除按钮。这是可行的。但我需要将父级和子级实体的i传递给我的数据提供者，这样才能添加/删除正确的对象。
代码：
<ReferenceInput label="Child to add" source="exercise_id" helperText="Add child to Parent" reference="
浏览 26提问于2019-11-26得票数 1
回答已采纳
我需要使react-admin，其中使用材料下的ui到RTL，到目前为止没有任何工作，因为有每个元素上的样式覆盖主体标签上的dir="rtl"，创建一个自定义主题，如： const theme = {
direction: 'rtl',
isRtl: true
};
const themeWithDirection = createMuiTheme({...defaultTheme, ...theme}); 并在管理组件上使用它，如下所示： <Admin locale="ar" dataProvider={dataProvider
浏览 22提问于2019-06-19得票数 2
回答已采纳
我需要一些关于如何使用react-admin构建分析/统计页面的支持或指导。我已经用谷歌搜索了这样做的方法，但到目前为止我还没有找到任何东西，而且看起来react-admin在定制方面太紧了。
我需要的是
因此，基本上我需要一种方法来计算来自resource的帖子、用户甚至评论的数量。如下所示：
可以在另一个独立页面上看到类似这样的内容：
但基本上，你可以从你的数据提供商那里获取数据，并将其呈现为普通的分析板或类似的东西。
这是一种在react-admin中实现的可行方法吗？有没有其他方法，比如第三方集成，可以帮助我解决这个问题？如有任何建议，我将不胜感激！
浏览 3提问于2021-10-29得票数 0
我在组件中调用const dataProvider = useDataProvider()，并且可以使用默认的方法，如dataProvider.getList("resource",{})，而不存在任何问题。然后，我使用自定义的DataProvider方法扩展了get，用于检索不具有所需的Record结构的对象，如下所示：
get: async <T = any>(
resource: string,
params: Partial<QueryParams>
): Promise<{
data: T
}>
浏览 11提问于2022-10-29得票数 5
回答已采纳
1回答
我们使用的是react-admin react-admin docs 我有一个带有字段productName, Price and Image的表单。Image字段为string类型，表示将图片上传到s3或其他任何目的地，并将上传的图片URL动态传递给image字段。 我有上传图像到s3的工作功能，现在我得到了s3网址，用户将填写ProductName and Price字段，并点击提交。当表单提交时，我希望将Image URL与其他字段一起传递。 以上就是我想要达到的要求。让我给你解释一下我都试了些什么。 我正在关注这个链接link。 ProductCreate.js export cla
浏览 18提问于2020-04-01得票数 0
1回答
我已经开始集成react-admin页面，在登录页面中，我正在尝试管理auth提供程序中的错误消息。我无法在通知.any one中显示错误消息，请帮助。
login: ({ username, password }) => {
const request = { 'email': username, 'password': password}
return axios.post(process.env.REACT_APP_URL+`/login`, request).then(response => {
浏览 3提问于2020-06-24得票数 0
react-admin应用程序向我显示了这个错误：
Attempted import error: 'useRecordContext' is not exported from 'react-admin'.
这个错误发生在我试图导入一个react-admin组件或钩子react时，类似于下面的图像：
因此，请告诉我，如果我必须更新react admin versión或其他任何东西，我目前正在根据下一个图像使用这些依赖关系：
浏览 7提问于2022-10-03得票数 0
回答已采纳
2回答
我正在使用react-admin框架(3.2)。我有一个对象，它存储被过期过滤的实体。我想在List中显示这些实体。到目前为止，我已经尝试创建假道具来复制List组件。
let fakeProps = {
basePath: basePath,
hasCreate: false,
hasEdit: false,
hasList: true,
hasShow: false,
history: {},
location: { pat
浏览 2提问于2020-07-16得票数 0
回答已采纳
特别是我对react和react-admin是个新手。
我正在尝试将Datagrid嵌入到Edit表单中。
API props (record)有一个对象的子数组，所以我不需要使用ReferenceManyField或类似的东西从Edit加载相关记录。
但是我似乎找不到如何引用记录的数组作为列表的ListProp
如果任何人有任何例子，那将是很好的。
谢谢
浏览 0提问于2020-11-24得票数 0
我正在使用react-admin list component，并希望为特定行添加自定义布局。 通常，每一行都是由list组件使用来自数据提供程序的数据构建的。我想根据行的数据自定义特定的行。这些特定的行不应该使用标准布局(和列)，而应该使用专门定义的布局。 下面是我正在寻找的一个示例： ? 应根据数据对象选择特殊行。形成标准行的标准数据对象可能如下所示： {
id: 127,
Reference: "OEPEE4",
author_id: 12,
...
} 特殊条目可能如下所示： {
id: 128,
isSpecia
浏览 23提问于2019-05-27得票数 2
回答已采纳
嘿嘿。我想要创建一个react 输入组件MapInput，其中给我一个带有绘图控件的地图。在那里，我可以绘制多边形并得到GeoJSON，然后我可以将它发送到后端REST服务器(json- server )。
我的系统由我的react客户端程序和一个带有REST的json服务器组成.例如，我的REST中的一个区域：
{
"id": "4",
"name": "Area 4",
"description": "This is area 4.",
"geometry": {
浏览 3提问于2021-09-19得票数 1
回答已采纳
4回答
是否有任何方法可以在DeleteButton中自定义react-admin按钮以添加诸如“您想要删除项吗？”之类的确认消息。目前，在单击DeleteButton时，它直接删除项目，而不需要确认。我尝试添加title属性以删除按钮，但它不会被触发。这是我的密码
//This worked with admin-on-rest, but not working with react-admin
const CategoryDeleteTitle = translate(({ record, translate }) => <span>
{translate(
浏览 0提问于2018-04-23得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
