Adminjs如何在资源上添加自定义React组件?
创始人
2024-07-27 18:30:08
0

可以在Adminjs的资源页面上注册自定义React组件,需要以下步骤:

  1. 在Adminjs的根目录下创建components文件夹,并在其下创建自定义组件MyComponent.tsx:
import * as React from 'react';

const MyComponent = (props) => {
  return (
    
My custom React component
) } export default MyComponent;
  1. 在Adminjs中注册MyComponent组件,并将其添加到指定资源resource上:
const AdminJS = require('adminjs');
const MyComponent = require('./components/MyComponent');

const adminJsOptions = {
  resources: [
    {
      resource: User,
      options: {
        actions: {
          list: {
            component: AdminJS.bundle('./list.component'),
          },
        },
        components: {
          myComponent: AdminJS.bundle('./MyComponent'),
        },
      },
    },
  ],
}

module.exports = AdminJSExpress.init(adminJsOptions);
  1. 在指定资源resource的列表或表单中使用myComponent:
import * as React from 'react';

const resource = {
  listProperties: ['name', 'email', 'phone_number', 'myComponent'],
  editProperties: ['name', 'email', 'phone_number', 'myComponent'],
  properties: {
    myComponent: {
      component: 'myComponent',
    },
  },
}

其中,listProperties和editProperties是该资源的列表和表单中显示的属性列表,properties则是每个属性对应的具体实现。最后,在Adminjs中,就能看到在资源上成功添加了自定义React组件。

相关内容

热门资讯

Android Recycle... 要在Android RecyclerView中实现滑动卡片效果,可以按照以下步骤进行操作:首先,在项...
安装apache-beam==... 出现此错误可能是因为用户的Python版本太低,而apache-beam==2.34.0需要更高的P...
Android - 无法确定任... 这个错误通常发生在Android项目中,表示编译Debug版本的Java代码时出现了依赖关系问题。下...
Android - NDK 预... 在Android NDK的构建过程中,LOCAL_SRC_FILES只能包含一个项目。如果需要在ND...
Akka生成Actor问题 在Akka框架中,可以使用ActorSystem对象生成Actor。但是,当我们在Actor类中尝试...
Agora-RTC-React... 出现这个错误原因是因为在 React 组件中使用,import AgoraRTC from “ago...
Alertmanager在pr... 首先,在Prometheus配置文件中,确保Alertmanager URL已正确配置。例如:ale...
Aksnginxdomainb... 在AKS集群中,可以使用Nginx代理服务器实现根据域名进行路由。以下是具体步骤:部署Nginx i...
AddSingleton在.N... 在C#中创建Singleton对象通常是通过私有构造函数和静态属性来实现,例如:public cla...
Alertmanager中的基... Alertmanager中可以使用repeat_interval选项指定在一个告警重复发送前必须等待...