首次使用AdminJS添加自定义React组件遇错误：需实现Action组件

针对你遇到的"You have to implement action component for your Action"错误，以下是具体修复方案：

1. 修正组件名称引用不匹配 #

你的自定义组件导出的是MyCustomActionComponent，但在资源配置中却使用了Components.MyCustomAction，导致AdminJS找不到组件。

修复方式二选一：

• 资源配置中更新组件引用：

  component: Components.MyCustomActionComponent,
  

• 或者修改组件文件的导出名称：

  // 组件文件末尾
  module.exports = { MyCustomAction: MyCustomActionComponent }
  

2. 修复isAccessible的语法与位置错误 #

你当前的isAccessible不仅位置错误（作为独立action存在），内部语法也存在问题（action: if(...)是无效JS代码）。需要将其移入consultation action内部，并修正逻辑：

consultation: {
  actionType: 'record',
  component: Components.MyCustomActionComponent, // 已修正的组件引用
  handler: (request, response, context) => {
    const { record, currentAdmin } = context
    return {
      record: record.toJSON(currentAdmin),
      msg: 'Hello world',
    }
  },
  // 正确的isAccessible配置
  isAccessible: ({ currentAdmin }) => {
    return currentAdmin.role_id !== 5;
  }
},

同时删除actions对象下独立的isAccessible键值对。

3. 确保自定义组件在AdminJS中注册 #

初始化AdminJS时，必须将自定义组件注册到实例中，否则无法被正确渲染：

const AdminJS = require('adminjs');
const { MyCustomActionComponent } = require('./../components/components');
const { PatientResource } = require('./path/to/PatientResource');

const adminJs = new AdminJS({
  resources: [PatientResource],
  components: {
    MyCustomActionComponent: MyCustomActionComponent,
  },
});

4. 统一模块导出/导入规范 #

你的组件使用ES6语法导入，但用CommonJS导出，建议保持一致性：

• 组件文件改用ES6导出：

  export const MyCustomActionComponent = (props: ActionProps) => { ... }
  

• 资源文件中正确导入：

  const { MyCustomActionComponent } = require('./../components/components');
  // 然后在action中使用：
  component: MyCustomActionComponent,
  

5. 检查TypeScript编译（若使用） #

如果组件是TypeScript编写的，确保已正确编译为JavaScript，tsconfig.json需配置正确的输出路径与格式，避免未编译的TS代码被直接导入。

完成以上修复后，AdminJS就能正确识别并加载你的自定义组件，错误即可解决。

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