alibaba/lowcode-engine

通过预览页渲染的方式加载页面,antd高级组件提示“组件渲染异常,请查看控制台日志”

Closed this issue · 3 comments

通过引擎的预览页对schema进行渲染,可以正常展示,但是直接通过@alilc/lowcode-react-renderer包进行渲染,antd高级组件渲染失败,提示“组件渲染异常,请查看控制台日志”,唯一的区别就是没有通过preview.html文件对react15-polyfill等依赖文件进行引入,而是通过项目本身的package.json方式进行包引入,以下是渲染页面代码:

import React, { useState } from "react";
import { buildComponents, AssetLoader } from "@alilc/lowcode-utils";
import ReactRenderer from "@alilc/lowcode-react-renderer";

// 这两个数据就是 demo 中点击保存后,缓存在 localStorage 中的数据
import schemeJson from "./schema.json";
import packageJson from "./packages.json";

const CodeRender = () => {
const [data, setData] = useState({
schema: undefined,
components: undefined,
});

async function init() {
const packages = packageJson;
const projectSchema = schemeJson;

const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const componentsMap = {};
componentsMapArray.forEach((component) => {
  componentsMap[component.componentName] = component;
});

const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
  libraryMap[_package] = library;
  if (renderUrls) {
    libraryAsset.push(renderUrls);
  } else if (urls) {
    libraryAsset.push(urls);
  }
});

// const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];

// TODO asset may cause pollution
const assetLoader = new AssetLoader();

// 先动态加载依赖包
// 会在 head 标签中动态添加 script 和 link 标签
await assetLoader.load(libraryAsset);

// const components = await injectComponents(buildComponents(libraryMap, componentsMap));

// 这个步骤是把页面中依赖的组件定义成一个 Map
// 里面的组件会关联上述动态加载的依赖包中指定的组件
// 类似这样:
// { Button : window.UILibray.Button }
const components = buildComponents(libraryMap, componentsMap);

const schema = componentsTree[0];

// 最终的结构参考 LocalRender
setData({ schema, components });

console.log("schema", schema);
console.log("components", components);

}

if (!data.schema || !data.components) {
init();
return

loading...

;
}

return (
<>

CodeRender



</>
);
};

export default CodeRender;

看看报的什么错误

image
这是控制台的错误截图

解决没