如何在React Admin的show/ArrayField组件中呈现嵌套在对象中的数组内容？
在React Admin的show/ArrayField组件中呈现嵌套在对象中的数组内容，可以通过使用嵌套的FieldArray组件来实现。
首先，确保你已经安装了react-admin和相关的依赖。然后，你可以按照以下步骤进行操作：
- 导入所需的组件和函数：
import React from 'react';
import { Show, SimpleShowLayout, ArrayField, Datagrid, TextField } from 'react-admin';- 创建一个自定义的Show组件，并在其中使用ArrayField组件来呈现嵌套数组的内容：
const CustomShow = (props) => (
<Show {...props}>
<SimpleShowLayout>
<ArrayField source="nestedArray">
<Datagrid>
<TextField source="field1" />
<TextField source="field2" />
{/* 添加其他字段 */}
</Datagrid>
</ArrayField>
</SimpleShowLayout>
</Show>
);在上面的代码中，我们使用ArrayField组件来包装嵌套数组的内容，并在其中使用Datagrid组件来定义每个数组项的展示方式。你可以根据实际情况添加其他字段。
- 在你的路由配置中使用自定义的Show组件：
import { Admin, Resource } from 'react-admin';
const App = () => (
<Admin>
<Resource name="yourResourceName" show={CustomShow} />
{/* 添加其他资源 */}
</Admin>
);
export default App;在上面的代码中，将CustomShow组件作为show属性传递给Resource组件，以便在资源的详情页中使用。
这样，当你访问资源的详情页时，React Admin将会使用自定义的Show组件来呈现嵌套在对象中的数组内容。
关于React Admin的更多信息和使用方法，你可以参考腾讯云的React Admin产品介绍页面：React Admin产品介绍
相关·内容
就像标题上说的。我需要在ArrayInput/SimpleFormIterator中使用ReferenceField。我一直收到以下错误：
TypeError: Cannot read property 'replace' of undefined
版本：
react-admin: 3.2.3
react: 16.12.0
下面是代码的一个片段：
<ArrayInput source="specialties" label="">
<SimpleFormIterator disableAdd>
<Refe
浏览 3提问于2020-05-07得票数 0
回答已采纳
我是一个打字新手，我正在更新我们的应用程序的反应路由器版本，从v5到v6。我一直在讨论如何更新这个条件路由包装器：
// v5
import React from "react";
import {
Redirect,
RedirectProps,
Route,
RouteComponentProps,
RouteProps,
} from "react-router-dom";
export type ConditionalRouteProps = React.FC<
RouteProps &
Partial&l
浏览 17提问于2022-06-16得票数 2
回答已采纳
Datagrid的报头是否每隔一行重复一次？我想在顶部只有一次标题(如excel)。
我怎么才能修复它？如何定制或构建类似于Datagrid的新组件？
<Datagrid>
<NumberField
source="ManagementFee"
label="Phí quản lý "/>
<NumberField
source="tax"
浏览 2提问于2019-02-17得票数 2
我是react的新手，我想私下展示一下我的管理仪表板，但是仅仅是第一线的工作和其他路由的组件没有显示出来。这是我的密码：
<Routes>
<Route path="/admin" element={<PrivateLayout />}>
<Route path="/dashboard" exact element={<Dashboard />} />
</Route>
<Route exact path='/' e
浏览 3提问于2022-04-13得票数 2
回答已采纳
我需要创建一个表，并在前端处理数据，处理一个数组，如果用户单击了什么，我将从数组中删除项，表将从数组中删除行。 我需要创建一个简单的表，比如List component，但是向它传递一个数组，我需要检查组件ArrayField，但是我不明白React Admin是如何知道我想传递它的是哪个数组。 https://marmelab.com/react-admin/Fields.html#arrayfield 这可能吗？ 我正在考虑用Material-UI创建一个新的表格，并避免使用List组件。
浏览 17提问于2021-05-10得票数 0
回答已采纳
2回答
我有一个管理仪表板，我成功地实现了它，但是它没有呈现页面。当我点击它时，它显示了
它更改URL，但不呈现页面
如果有人知道，请告诉我我是如何解决这个问题的
App.js
<Router>
<Navbar />
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/service" element={<Service /&
浏览 18提问于2022-03-28得票数 2
我想建立一个reactjs网站，它处理两个前端页面以及管理端页面。我尝试使用以下方法拆分管理组件和前端组件
index.js
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
App.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Customer from &
浏览 8提问于2021-12-15得票数 2
回答已采纳
我正在尝试创建数组字段组件，它将接受任何具有BaseProps的反应性功能组件。但是，在ArrayField中呈现组件时会出现错误。
请参阅下面的代码。有什么好主意吗？
type BaseProps<T> = {
name: string;
convertValue?: (value: T) => T;
};
type CompanyType = {
address: string;
employees: number;
};
type CompanyProps = BaseProps<CompanyType> & {
r
浏览 12提问于2022-03-17得票数 0
回答已采纳
2回答
我有以下使用react路由器v3的路由配置：
<Route component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="/" component={Admin}>
<IndexRoute component={Dashboard} />
<Route path="profile&#
浏览 5提问于2016-12-29得票数 1
3回答
我正在用管理仪表板构建一个面向消费者的应用程序。我想让他们的路由保持独立，所以我试着授权：
App.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//styles
import './style/bootstrap/bootstrap.scss';
//apps
import Mainapp from './mainapp/Mainapp'
浏览 1提问于2019-09-05得票数 1
回答已采纳
2回答
我收到了这个警告，除了App.js中包含“默认页面内容}”的"/“之外，我看不到我的路由。如何重写包含其他路由的代码？
位于"/admin“位置的匹配叶路径没有元素。这意味着默认情况下它将呈现一个空值，从而生成一个“空”页。
我用的是：“反应”："^17.0.2"，“反应-多姆”："^17.0.2"，“反应-路由器-多姆”："^6.0.2"，
App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Brow
浏览 11提问于2021-12-07得票数 2
回答已采纳
我试图在ChipField列表视图中有条件地显示react-admin组件。它类似于，但对于list，我在使用list时还没有找到一种工作方式。
import React from 'react';
import { ChipField, Datagrid, ImageField, List, ListController, TextField } from 'react-admin';
import { ListProps } from '../../types/admin/ListProps';
import ProductBulkActio
浏览 9提问于2020-03-15得票数 3
回答已采纳
我希望在我的应用程序的不同部分重用上下文提供程序(“高级组件”)，但是我的状态不会被更新。
这是提供者的包装器。
import React, { FC, useState } from "react";
import AdminContext from "./adminContext";
const AdminContextWrapper: FC = ({ children }) => {
const [authAdmin, setAuthAdmin] = useState<boolean | null>(null);
cons
浏览 5提问于2022-02-17得票数 0
回答已采纳
1回答
自定义字段不呈现传递的标签
、、、、
我还在想一切是如何运作的。但是我绝对喜欢分页和过滤是多么的容易！
我的问题是：
我正在尝试构建一个相对简单的自定义字段。它应该从数组中呈现一串字符串：
const ArrayField = ({ source, record = {} }) => {
const hasItems = has(record, source);
return (
<div>
{hasItems && record[source].map(item => <div key={item.id}>{item.designation}<
浏览 2提问于2017-11-09得票数 0
回答已采纳
2回答
我正在开发一个基于match.params的显示页面。由于某种原因，一些函数运行了3次，这给了我最初的2次未定义和第三次我想要的结果。
所以我有这个显示组件，它有来自主组件的道具“项目”。在这个显示组件中，我在数组上执行一个find函数，其中包含支持项目。这必须将project.id等于match.params.id的1项返回。这很好，如果我通过单击一个按钮(通过应用程序)访问该页面，我将得到具有正确的项目和属性的页面(例如project.name)。但是，如果我使用浏览器中的url重新加载或访问该页面，则会出现一个错误，即属性名称未定义。如果我查看控制台，就会发现我的console.logs
浏览 0提问于2018-03-07得票数 2
回答已采纳
1回答
我有一个使用React路由器v5的React应用程序(尽管我认为这个问题适用于V4、5和6)。
下面是我想做的事情:在App.js中：
<Router>
<Route path='/main' component={Main}/>
<Route path='/admin' component={Admin}/>
</Router>
然后在Main.js，我还有另外两条路线：
const Main=()=> {
return (
<div className=
浏览 11提问于2022-08-10得票数 1
回答已采纳
在旧版本的中，我使用了“重定向”来进行路由重定向，我的应用程序的代码如下：
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Navbar from './core/components/Navbar';
import Admin from './pages/Admin';
import Catalog from './pages/Catalog';
import ProductDetails from './
浏览 2提问于2022-06-25得票数 2
1回答
如果用户没有任何权限显示react-admin的资源，他将无法登录，并收到以下消息： React-admin is properly configured.
Now you can add a first <Resource> as child of <Admin> 如果没有资源，我们如何显示登录页面和仪表板？ const App = ({ classes }) => (
<React.Fragment>
<Admin
locale="fr"
i18nPro
浏览 13提问于2018-12-18得票数 1
回答已采纳
1回答
我正在使用react-admin框架(3.2)，并且我正在努力解决以下错误：
ReferenceError: Cannot access 'GameScheduleField' before initialization
下面是我将GameScheduleField组件导入到我的资源中的方法：
import { GameScheduleField, GameScheduleInput } from '../components/GameScheduleComponents';
我还导入了至少八个其他组件，没有任何问题。GameScheduleField是一个类，
浏览 0提问于2020-03-16得票数 0
我不知道如何使用react-admin呈现嵌套在记录中的对象数组。我从API返回的数据如下所示： {
"data": {
"getPromotion": {
"id": "ckfxvfrvs00033h5sz4ucoi7e",
"reference": "Monday special",
"startDate": "2020-10-06T11:20:00.000Z",
浏览 19提问于2020-10-07得票数 2
回答已采纳
请帮帮我
当路由不在<Routes>中时，它会给出一个错误: error: A永远只用作元素的子元素，从不直接呈现。请把你的包在一个
当它在<Routes>中时，它会给出一个错误: Error: Abc is not a <Route> component。的所有组件子项必须为<Route>或<React.Fragment>
请帮我解决这个问题？或者任何建议。
在两种情况下都尝试过此操作，但出现了上述错误之一。
由于这不会生成错误，但是我的私有路由的子组件不会呈现。
import React from 'react'
浏览 0提问于2021-12-01得票数 1
我想要通过身份验证的路由，如果用户没有登录页面，就不能访问，就像某人进入url localhost./admin/dashboard时，他不应该能够导航，相反，如果没有登录，他应该被带到登录页面。
我正在使用react路由器v6并为我的应用程序创建私有路由。
AdminRoute.js文件代码如下
import React from "react";
import { Route, Navigate} from 'react-router-dom';
import { isAuthenticated } from "../helper/auth"
浏览 4提问于2021-12-20得票数 2
回答已采纳
我从Firebase v9构建了一个使用auth的专用路由，并使用function router v6来访问管理部分，当我登录它时，它将我重定向到管理页面，但是页面是空的，控制台日志这个"React.jsx: type是无效的--需要一个字符串(用于内置的组件)或类/函数(用于复合组件)，但没有定义“。让我“在PrivateRoute.jsx:7上检查你的代码。”谢谢你的帮助。
PrivateRoute.jsx
import React from 'react'
import {Navigate} from 'react-router-dom'
impo
浏览 5提问于2021-12-07得票数 1
回答已采纳
我正在开发一个基于反应的应用程序，在使用HasRole组件呈现某些jsx之前，我正在检查用户的权限。所有操作都很好，除非我有一个函数作为HasRole组件的子函数，如果用户也没有权限，则每次父组件呈现时都调用该函数。我怎样才能防止这种情况发生。
HasRole.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class HasRole extends Component {
render() {
const { children,
浏览 1提问于2018-04-05得票数 3
我是React的新手。
我正在用<dataGrid>创建一个表，我只想对第一列的值进行居中，但我尝试了几种方法，但无法管理如何做到这一点：
<ArrayField source="bans" reference="bans" >
<Datagrid style={{ width: '500px' }}>
<BooleanField
label="isBanned"
source="isBanned"
浏览 6提问于2020-12-18得票数 2
回答已采纳
1回答
给定this代码： const array = ['um', 'dois', 'tres', 'quatro', 'cinco'];
const Task = (value, i) => {
return (
<li key={i}>{value}</li>
);
}
function App() {
return (
array.map((e, i) => {
return Task(e, i);
})
)
} 我注意到，映射此数组
浏览 24提问于2021-08-29得票数 0
如何直接访问dataProvider中的react admin？我尝试使用自定义 dataProvider，但我不知道如何使用它。我的目标是使用映射在输出中显示一个列表。
//Contacts.js
/// --- List ---
export const ContactList = (props) => {
const classes = useStyles();
const {data} = useGetList('contacts', props.id);
return (
<List className={classes.list}&
浏览 3提问于2020-12-06得票数 1
回答已采纳
我已经在一个新的React-Admin项目中创建了许多Show视图。我希望使用Material UI的Grid组件来将它们排列成更高效、更有用的布局，而不是让这些字段形成一个单独的列。不幸的是，这会阻止React Admin的...ShowLayout组件正确地呈现其中的字段组件。 我希望能够做这样的事情： <Show {...props}>
<SimpleShowLayout>
<Grid container>
<Grid item>
<TextField
浏览 23提问于2019-04-19得票数 13
1回答
这是PrivateRoute.js文件的mycode
import React from "react";
import {Route,Redirect} from "react-router-dom"
import {isAuthenticated} from "./index"
const PrivateRoutes = (props)=>{
return(
isAuthenticated()?(<Route
render={ (props) =>
<component {...p
浏览 3提问于2022-05-11得票数 1
2回答
我想做什么?
我不想在我的rails视图文件中显示来自rails模型的react.js组件的数据。
我有什么?
我安装了这些宝石
rails-admin
react-rails
我做了什么?
我创建了一个新的rails项目。我安装了react rails创业板和rails-admin创业板创建了具有以下类型的新控制器
rails g脚手架文章标题:string body:text
我可以从rails管理员的帖子中添加所有的内容都可以。
我的控制器看起来：
class PostsController < ApplicationController
before_action :set
浏览 2提问于2016-05-16得票数 3
1回答
为什么这个反应组件被渲染了4次？
、、、、
基本上，我有React组件，它从Firestore获取数据，并将数据存储在items数组中。之后，我将呈现组件中的所有数据。我目前的问题是menus有3个空数组，我不知道为什么.它们也被呈现到页面上。
首先，我有一个异步函数来获取数据，但是我用unsubscribe const将其更改为一个普通函数。Firestore提供了一个unscubscribe()函数，它在调用监听器时删除监听器。我想也许getMenu() get被多次调用，这就是为什么我有空数组，但它并没有解决我的问题.
现在我被这个问题困住了，如果有人能帮忙，我会很感激的。
import { collection, getDocs
浏览 4提问于2021-08-20得票数 1
有一个目录组件，某些redux存储和响应上下文提供程序代码。在路由器v6之前，它们封装了一个嵌套的<BrowserRouter>，其中包含目录子路由，如下所示
在此之前
client/src/components/Catalogue/index.js
import React, { useCallback, useEffect, useState } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Provider,
浏览 2提问于2022-06-15得票数 2
回答已采纳
我有两个例子。主要区别在于声明内部和外部组件中的一些变量。组件本身更改状态。因此，在组件外部声明永不更改(既不是状态变量，也不是依赖项变量)可以节省一些内存、重新创建或其他什么？或者这两种选择都很好？
选项A
import React from 'react';
const menu = [
{ slug: '/a', label: 'Label A' },
{ slug: '/b', label: 'Label B' },
{ slug: '/c', label: 'Labe
浏览 2提问于2021-10-26得票数 1
如何在Modal中单击remove按钮时删除显示的内容。
当从数组中单击remove按钮时，我可以删除该对象，但该内容仍显示在屏幕上。
我认为从数组中删除对象将重新启动map函数，该函数将再次调用循环，新内容将可见
import React from "react";
import { Modal, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
let data = [
{
Name: "COOL",
浏览 26提问于2020-07-31得票数 0
这可能是一个非常简单的修复，但我还没有弄清楚为什么map函数不能将输入识别为数组。
我有一个两难模型，其中包含一个用户评论数组。我获取数据并将其映射到react组件的状态。然后，我尝试将数据作为道具解析到子组件，在该组件中，我试图映射数据。
减速器
const initialState = {
loading: false,
dilemma: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case GET_DILEMMA:
return
浏览 0提问于2018-08-28得票数 0
我有两种不同的前端布局和管理面板的管理panel.Components，在管理布局中呈现了相关性，但是对于前端，它没有正确地切换路由，也没有在前端布局中呈现。当我在index.js中不使用确切的属性时，它甚至不适用于管理面板路由。我也参考过这个链接，，但是它对我不起作用。
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "components/FrontEnd/Login";
import Frontend from "layouts/Frontend
浏览 0提问于2018-12-10得票数 1
回答已采纳
1回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
1回答
我想显示一个警告，但我的警告使我的应用程序向下滚动，像这个，我想显示在中心的警报，并提高它。
我试过使用这个css，但是没有工作。
const styles = StyleSheet.create({
elevatedElement: {
zIndex: 3000000,
elevation: 3000000,
},
})
这是我的警报代码
import React, { useState } from 'react'
import { View } from 'react-native';
import { Button, Para
浏览 0提问于2021-11-01得票数 0
回答已采纳
我希望将我的路由文件分解成组件，所以
<BrowserRouter basename="/recruiter" >
<div>
<Nav />
<Switch>
/* HOMEPAGE ROUTES */
<Route exact path="/" component={Home} />
<Route exact path="/how-and-why" c
浏览 0提问于2018-08-27得票数 1
1回答
我正在做一个实践练习，我正在使用router v6创建子路由，问题是配置文件路由有一个身份验证，如果它是认证的--它向我显示配置文件组件，否则它会把我送回家。现在，对于这个/profile路由，我创建了一个/exerciselist子路由，但是当我想访问/配置文件/锻炼者时，组件不加载我，它直接把我发送到/profile路由，我如何使它加载配置文件/练习路径？
import React from 'react'
import { BrowserRouter, Route, Routes, Navigate} from "react-router-dom"
im
浏览 6提问于2022-05-05得票数 1
我想在DOM中添加React组件。接下来，我需要删除(隐藏)那个。然后，我想再一次添加(显示)所有的数据。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ value: e.target.value })
}
r
浏览 1提问于2022-02-28得票数 0
2回答
为SPA工作的路由器，但我似乎无法让它呈现出除了以外的其他任何东西。
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import Parameter from './components/parameter/Parameter';
class App extends React.Component
浏览 2提问于2017-02-15得票数 0
回答已采纳
我想知道在使用react-admin时，我正在处理的数据是什么。(在控制台中查看它们以帮助调试)
例如，当我使用List时
import React from 'react';
import { Datagrid, List, TextField } from 'react-admin';
import { ListProps } from '../../types/admin/ListProps';
const ProductList = (props: ListProps): JSX.Element => {
console.lo
浏览 5提问于2020-03-09得票数 0
我尝试在React中将登录组件封装到路由标记中，但现在它不再出现在页面中了。你能告诉我发生了什么吗？
import React, {useState, useReducer} from 'react';
import './App.css';
import Login from './components/Login.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
retu
浏览 4提问于2022-01-13得票数 1
回答已采纳
如何在每个页面的顶部都有一个Navbar来访问react-router useParams钩子呢？使用下面的代码，User将返回userId，但Nav将获得一个空对象。
看起来，组件(元素)需要在Route中呈现才能使用这个钩子，但是在v6中，所有的路由都是“精确的”，所以我看不到静态组件在每个路径上呈现的方法。
<BrowserRouter>
<Nav /> // How does this component show on every page and get access to route params?
<Routes>
<R
浏览 3提问于2022-09-08得票数 1
回答已采纳
1回答
我将所有切换元素升级到路由，组件更改为元素。
如何将剩下的更改为v6
Routes.js
import React, { lazy, Suspense } from 'react';
import { HashRouter as Routes, Route, Router } from 'react-router-dom';
import Loading from './components/Loading';
import { ProtectedRoute, WithLayoutRoute } from './routers';
浏览 9提问于2022-05-26得票数 3
回答已采纳
我正在尝试升级到react-router-dom v6：
v5
在第5版中，它的作用就像一种魅力：
App.js
import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./app.css";
import Home from "./pages/home/Home";
import {
BrowserRouter as Router,
Switch,
Rout
浏览 4提问于2022-02-19得票数 1
回答已采纳
我刚开始研究沃尔玛的react/redux/react路由器/同构样板电极，我很难添加多条路线。当我添加第二条路线时，它似乎什么也不做，链接和推送到其他路线不会改变页面。
下面是样板板中的单一路线
// routes.jsx
import React from "react";
import {Route} from "react-router";
import Home from "./components/home";
export const routes = (
<Route path="/" compon
浏览 3提问于2016-11-30得票数 0
回答已采纳
1回答
我现在正在我的应用程序中使用React 17.0.2，react路由器-dom 6.0.2。
我尝试使用react上下文和路由在路由上添加身份验证。
在App.js中，我可以从AuthContext中获得价值
...
const { authState, authReducer } = useContext(AuthContext);
<Routes>
<Route element={PrivateRoute}>
<Route path="/dashboard/*" element={<MainLayou
浏览 4提问于2021-11-13得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
