我应该如何在物料中的自定义setter中使用antd

[xiaochena]

这是一个帮助请求

可复现项目：https://github.com/xiaochena/my-material-component
可见的这是一个物料库
在 lowcode\general-image的meta.ts中我写了一个自定义的 setters-->CustomizeSetter
以下是其相关代码和

import * as React from 'react';
import { Input } from 'antd';

export default class CustomizeSetter extends React.Component<{
  onChange: (icon: string | object) => undefined;
}> {
  static displayName = 'CustomizeSetter';
  componentDidMount() {
    console.log(this.props, 'this.props');
  }
  render() {
    return <Input onChange={(e) => this.props.onChange(e.target.value)} />;
  }
}

当我使用这个自定义setters时页面中提示了一个错误

当我将 import { Input } from 'antd'; 改为 import { Input } from '@alifd/next';
或使用 import { Input } from '../../../node_modules/antd';时错误消失。

很明显这两个都不是很好的解决方法

• 1、我希望使用antd
• 2、使用相对路径引入的方式很奇怪

求助：我应该如何在物料的自定义setter中使用antd。

我将持续尝试、期待有人回复

[liujuping]

antd 应该被 extends 掉了，你可以在设计器的 html 上引入 antd 的 cdn 链接。

[xiaochena]

antd 应该被 extends 掉了，你可以在设计器的 html 上引入 antd 的 cdn 链接。

我应该在哪里引入？build.lowcode.js @alifd/build-plugin-lowcode 的 builtinAssets 中吗

[RedboneStone]

  plugins: [
    [
      '@alifd/build-plugin-lowcode',
      {
        library,
        engineScope: '@alilc',
        staticResources: {
          antdJsUrl: 'https://g.alicdn.com/code/lib/antd/4.20.0/antd.min.js',
          antdCssUrl: 'https://g.alicdn.com/code/lib/antd/4.20.0/antd.min.css'
        },
        setterMap: {
          CustomizeSetter: "../lowcode/general-image/setters/index",
        }
      },
    ]
  ],

附上相关 issue
#826

对了, meta.ts 里面就不要直接引入 setter了, 上面已经注册了 setter, 直接使用即可

[xiaochena]

啊、我有在 build-plugin-lowcode的源码里看到使用 COMMON_EXTERNALS extends 了 antd
还在 lowcode-materials 的 antd-lowcode-materials 里面看到了 staticResources的使用，但是没有把这两个联想到一起、@alifd/build-plugin-lowcode的文档没有这个 staticResources 这个 api 😭
多谢大佬

[xiaochena]

staticResources
记录：
与此同时因为这样只是在 物料的 html 上引入 antd 的 cdn 链接。因此在编辑器中使用这个物料、或通过 @alilc/build-plugin-alt 调试时同样需要在 编辑器中引入 antd 的 cdn 链接、不过方式有所不同、是修改 public下的 index.ejs 和 preview.html 。

[Ha0ran2001]

  plugins: [
    [
      '@alifd/build-plugin-lowcode',
      {
        library,
        engineScope: '@alilc',
        staticResources: {
          antdJsUrl: 'https://g.alicdn.com/code/lib/antd/4.20.0/antd.min.js',
          antdCssUrl: 'https://g.alicdn.com/code/lib/antd/4.20.0/antd.min.css'
        },
        setterMap: {
          CustomizeSetter: "../lowcode/general-image/setters/index",
        }
      },
    ]
  ],

附上相关 issue #826

对了, meta.ts 里面就不要直接引入 setter了, 上面已经注册了 setter, 直接使用即可

请问如何使用呢？我添加到settermap中后，我用字符串不行，不加引号又直接报错