自定义组件不生效

[tongluyang]

根据文档
https://github.com/baidu/amis/blob/master/docs/sdk.md#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86

做了两件事情：
1、新建CustomRenderer.tsx，内容和文档一模一样，为

import * as React from 'react';
import {
    Renderer
} from 'amis';

@Renderer({
    test: /(^|\/)my\-renderer$/,
})
class CustomRenderer extends React.Component {
    render() {
        const  {tip} = this.props;
        return (
            <div>这是自定义组件：{tip}</div>
        );
    }
}

2、另外一个组件内使用：

schema = {
            "type": "page",
            "title": "自定义组件示例",
            "body": {
                "type": "my-renderer",
                "tip": "简单示例"
            }
        };

结果为

感觉CustomRenderer.tsx就像一个和项目脱离了的独立的文件一样，保存也不会触发编译，npm run dev控制台下面没任何输出，是我漏掉了什么东西吗？

[2betop]

嗯，你需要在入口 import 以下这个文件

[tongluyang]

你好，这个问题解决了，不仅需要引入，还需要再 “使用” 一下

不过基于这个情况我想再扩展一下请教个问题

因为我不是专业的前端，没深入研究过这个原理，只能猜一下

如果只引入，是不是被编译工具给“优化”掉了，导致找不到

如果再使用一下就没这个问题了，不过我是通过const tmp = CustomRenderer;这种方式做的，我感觉这种方式太蠢了，更加优雅的方式应该是什么？

[2betop]

要看你是怎么引入的

[2betop]

直接 import 'xxx' 不要写 import * as xxx from 'xxx' 或者 import xxx from 'xxx'

[tongluyang]

感谢指点那么基础的问题 🌹

[Flourad]

感谢指点那么基础的问题 🌹

直接 import 'xxx' 不要写 import * as xxx from 'xxx' 或者 import xxx from 'xxx'

请教一下 为什么我在这里的会报错：Parsing error: Unexpected character '@'
@Renderer({
test: /(^|/)my-renderer$/,
})

[imlida]

直接 import 'xxx' 不要写 import * as xxx from 'xxx' 或者 import xxx from 'xxx'

我觉得应该在官方文档上补充一下