alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.68k stars 2.55k forks source link

自己创建的react工程, 渲染antd的某些组件报错 #536

Closed fxhfwf closed 2 years ago

fxhfwf commented 2 years ago
  1. app.js中的package和scheme的内容 const packages = [{"package":"moment","version":"2.24.0","urls":["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"],"library":"moment"},{"package":"lodash","urls":["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"],"library":"lodash"},{"title":"fusion组件库","package":"@alifd/next","version":"1.24.18","urls":["https://g.alicdn.com/code/lib/alifd__next/1.24.18/next.min.css","https://g.alicdn.com/code/lib/alifd__next/1.24.18/next-with-locales.min.js"],"library":"Next"},{"package":"antd","version":"4.19.5","urls":["https://g.alicdn.com/code/lib/antd/4.19.4/antd.min.js","https://g.alicdn.com/code/lib/antd/4.19.4/antd.min.css"],"library":"antd"},{"package":"@didi/silver-crud","version":"0.1.1-alpha.0","library":"DidiSilverCrud","urls":["https://s3-gzpu-inter.didistatic.com/silver/material/@didi/silver-crud/0.1.1-alpha.0/build/lowcode/view.js","https://s3-gzpu-inter.didistatic.com/silver/material/@didi/silver-crud/0.1.1-alpha.0/build/lowcode/view.css"],"editUrls":["https://s3-gzpu-inter.didistatic.com/silver/material/@didi/silver-crud/0.1.1-alpha.0/build/lowcode/view.js","https://s3-gzpu-inter.didistatic.com/silver/material/@didi/silver-crud/0.1.1-alpha.0/build/lowcode/view.css"]}]

    const projectSchema = {"version":"1.0.0","componentsMap":[{"package":"@didi/silver-crud","version":"0.1.1-alpha.0","exportName":"default","main":"src/index.tsx","destructuring":false,"subName":"","componentName":"DidiSilverCrud"},{"devMode":"lowcode","componentName":"Page"}],"componentsTree":[{"componentName":"Page","id":"node_dockcviv8fo1","props":{"ref":"outerView","style":{"height":"100%"}},"docId":"docl3i5yae3","fileName":"/","state":{"text":{"type":"JSExpression","value":"\"outer\""},"isShowDialog":{"type":"JSExpression","value":"false"}},"css":"body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}","lifeCycles":{"componentDidMount":{"type":"JSFunction","value":"function componentDidMount() {\n console.log('did mount');\n}"},"componentWillUnmount":{"type":"JSFunction","value":"function componentWillUnmount() {\n console.log('will unmount');\n}"}},"dataSource":{"list":[{"type":"fetch","isInit":true,"options":{"params":{},"method":"GET","isCors":true,"timeout":5000,"headers":{},"mock":{"isMock":false},"uri":"https://mock.xiaojukeji.com/mock/13981/table/list"},"id":"getBlackListConfigList"}]},"methods":{"testFunc":{"type":"JSFunction","value":"function testFunc() {\n console.log('test func');\n}"},"onClick":{"type":"JSFunction","value":"function onClick() {\n this.setState({\n isShowDialog: true\n });\n}"},"closeDialog":{"type":"JSFunction","value":"function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}"}},"originCode":"class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":"","children":[{"componentName":"DidiSilverCrud","id":"node_ocl3i5yafn1","props":{"columns":[{"title":"ID","dataIndex":"id","hideInForm":"true","valueType":"text","width":200},{"title":"名称","dataIndex":"title","hideInSearch":true,"width":200},{"title":"数字","dataIndex":"number","hideInSearch":true,"width":200},{"title":"状态","dataIndex":"state","fieldProps":{"mode":"multiple","options":[{"label":"开启","value":"open"},{"label":"关闭","value":"close"}]},"valueType":"select","width":200},{"title":"操作","width":200,"key":"operate","hideInForm":true,"hideInSearch":true,"optionMenus":[{"key":"view","name":"查看","request":""},{"key":"copy","name":"复制"},{"key":"edit","name":"编辑","request":""},{"key":"delete","name":"删除","request":""},{"key":"examine","name":"审核","request":"","confirm":"show","messageBox":"show"},{"key":"disable","name":"禁用","request":"","confirm":"show","messageBox":"show"},{"key":"enable","name":"启用","request":""},{"key":"abandon","name":"废弃","request":""}]}],"pagination":{"pageSize":10},"useSearch":true,"useResetButton":true,"useAdd":true,"addRequest":{"type":"JSFunction","value":"function () { return this.dataSourceMap.getBlackListConfigList }"},"request":{"type":"JSFunction","value":"function () { return this.dataSourceMap.getBlackListConfigList }"}},"docId":"docl3i985f2","hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}],"i18n":{}}

  2. package.json中的内容: { "name": "testrender", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", "react-scripts": "5.0.0", "web-vitals": "^2.1.4", "@alilc/lowcode-plugin-code-editor": "^1.0.1", "@alilc/lowcode-plugin-code-generator": "^1.0.2", "@alilc/lowcode-plugin-components-pane": "^1.0.2", "@alilc/lowcode-plugin-datasource-pane": "^1.0.3", "@alilc/lowcode-plugin-inject": "^1.0.0", "@alilc/lowcode-plugin-manual": "^1.0.2", "@alilc/lowcode-plugin-schema": "^1.0.0", "@alilc/lowcode-plugin-simulator-select": "^1.0.0", "@alilc/lowcode-plugin-undo-redo": "^1.0.0", "@alilc/lowcode-plugin-zh-en": "^1.0.0", "@alilc/lowcode-react-renderer": "^1.0.0", "@alilc/lowcode-setter-behavior": "^1.0.0", "@alilc/lowcode-setter-title": "^1.0.2" }, "devDependencies": { "@alib/build-scripts": "^0.1.18", "@alilc/lowcode-engine": "^1.0.0", "@alilc/lowcode-engine-ext": "^1.0.0", "@alilc/lowcode-types": "^1.0.0", "@types/events": "^3.0.0", "react": "^16.14.0", "react-dom": "^16.14.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", "@types/streamsaver": "^2.0.0", "build-plugin-fusion": "^0.1.0", "build-plugin-moment-locales": "^0.1.0", "build-plugin-react-app": "^1.1.2", "fs-extra": "^10.0.1", "tsconfig-paths-webpack-plugin": "^3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

public/index.html image

  1. app.js的内容

import React, { useState } from 'react'; import { Loading } from '@alifd/next'; import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; import ReactRenderer from '@alilc/lowcode-react-renderer'; import { injectComponents } from '@alilc/lowcode-plugin-inject';

const Home = () => { const [data, setData] = useState({});

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

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)];

const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));

setData({
  schema,
  components,
});

}

const { schema, components } = data; console.log("123",schema, components )

if (!schema || !components) { init(); return ; }

return (

1234

); }; export default Home

问题: 第一种情况和第二种情况的package.json中只有react, react-dom的版本不一致

第1种情况复现步骤:

  1. init一个creat-react-app的工程
  2. package.json中的react, react-dom的依赖降为16.14.0 3.点击操作中的删除按钮 image 提示的三种原因,没有多余的react版本npm ls react只有一个版本。 也没有违法使用hooks

第2种情况复现步骤:

  1. init一个creat-react-app的工程 如果这边不降低react, react-dom的版本(还是保持18.0.0的版本) image
github-actions[bot] commented 2 years ago

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

github-actions[bot] commented 2 years ago

This issue was closed because it has been stalled for 10 days with no activity.

chenzhizhen commented 1 year ago

请问这个问题后来怎么解决的