嘿，我看了你的问题和代码，很快找到了导致“INCORRECT ELEMENT”错误的原因！先帮你梳理下问题场景：你用admin-on-rest框架开发，点击列表页的编辑按钮能正常跳转，但编辑页面始终弹出错误提示。结合你的代码和截图，问题出在自定义编辑操作组件的传递方式上。

先放一下你提供的错误截图：

相关代码片段 #

App.js #

import { DataTypeList } from './Components/DataType/DataTypeList'; 
import { FeatureList } from './Components/FeatureList'; 
import { DataPointTypeList } from './Components/DataPointTypeList'; 
import DashBoard from './Components/DashBoard'; 
import { DataTypeCreate } from './Components/DataType/DataTypeCreate'; 
import { DataTypeEdit } from './Components/DataType/DataTypeEdit'; 

const httpClient = (url, options = {}) => { 
  if (!options.headers) { 
    options.headers = new Headers({ Accept: 'application/json' }); 
  } 
  // add your own headers here 
  options.headers.set('X-Custom-Header', 'foobar'); 
  return fetchUtils.fetchJson(url, options); 
} 

const restClient = jsonServerRestClient('http://localhost:3001/designer', httpClient); 

const App = () => ( 
  <Admin title="GAMMA" dashboard={DashBoard} restClient={restClient}> 
    <Resource name="datatypes" list={DataTypeList} create={DataTypeCreate} edit={DataTypeEdit} /> 
    <Resource name="features" list={FeatureList} /> 
    <Resource name="datapointtypes" list={DataPointTypeList} /> 
  </Admin> 
); 

export default App; 

DataTypeEdit.js（原错误代码） #

import React from 'react'; 
import { Create, Edit, SimpleForm, TextInput } from 'admin-on-rest'; 
import { DataTypeActions } from '../Actions/DataTypeActions'; 
import { DataTypeEditActions } from '../Actions/DataTypeEditActions'; 

export const DataTypeEdit = (props) => ( 
  <Edit title="Data Type - EDIT" actions={<DataTypeEditActions /> {...props}> 
    <SimpleForm> 
      <TextInput source="id" label="Name"/> 
    </SimpleForm> 
  </Edit> 
); 

DataTypeEditActions.js #

import React from 'react'; 
import { CardActions } from 'material-ui/Card'; 
import FlatButton from 'material-ui/FlatButton'; 
import { DeleteButton, ListButton, RefreshButton, ShowButton, Edit } from 'admin-on-rest'; 

const cardActionStyle = { zIndex: 2, display: 'inline-block', float: 'right', }; 

export const DataTypeEditActions = ({ basePath, data }) => ( 
  <CardActions style={cardActionStyle}> 
    <ListButton basePath={basePath} /> 
    <DeleteButton basePath={basePath} record={data} /> 
    <RefreshButton /> 
  </CardActions> 
) 

错误原因与修复方案 #

核心问题：actions属性的传递语法错误 #

在DataTypeEdit.js中，你对Edit组件的actions属性的写法有误：

<Edit title="Data Type - EDIT" actions={<DataTypeEditActions /> {...props}>

这里你把{...props}放在了<DataTypeEditActions />标签的外面，既没有正确将props传递给自定义的操作组件，还导致了JSX语法错误，让React渲染出了不符合admin-on-rest预期的元素结构，从而触发了“INCORRECT ELEMENT”错误。

修复步骤 #

1. 修正DataTypeEdit.js的JSX语法
   把props正确传递给DataTypeEditActions组件内部，修改后的代码如下：

import React from 'react'; 
import { Create, Edit, SimpleForm, TextInput } from 'admin-on-rest'; 
import { DataTypeActions } from '../Actions/DataTypeActions'; 
import { DataTypeEditActions } from '../Actions/DataTypeEditActions'; 

export const DataTypeEdit = (props) => ( 
  <Edit title="Data Type - EDIT" actions={<DataTypeEditActions {...props} />}>
    <SimpleForm> 
      <TextInput source="id" label="Name"/> 
    </SimpleForm> 
  </Edit> 
); 

2. 清理不必要的组件导入
   在DataTypeEditActions.js中，你导入了Edit组件但并没有使用，这会增加不必要的代码体积，还可能引发潜在冲突，建议删除这部分：

// 原导入
import { DeleteButton, ListButton, RefreshButton, ShowButton, Edit } from 'admin-on-rest';

// 修改后
import { DeleteButton, ListButton, RefreshButton, ShowButton } from 'admin-on-rest';

为什么这样能解决问题？ #

admin-on-rest的Edit组件要求actions属性接收一个React元素，并且这个元素需要获取basePath、record等核心props来正常工作。修正后的写法确保了DataTypeEditActions能拿到这些必要的参数，同时JSX语法正确，框架能识别并渲染出符合要求的操作栏元素，自然就不会再弹出错误提示了。

内容的提问来源于stack exchange，提问作者Cansel Muti