我创建了菜单组件。在菜单组件中还有一个子菜单组件,因此它有一个嵌套的组件。但是我想将这个菜单组件导入到另一个组件中,这个组件是一个标题组件,但是在 Strapi headless cms 中显示错误。Strapi 只允许一个嵌套的组件。他们不允许将一个嵌套的组件导入到另一个嵌套的组件中。我该怎么办?如果有任何解决方案,请分享。
我创建了菜单组件。在菜单组件中还有一个子菜单组件,因此它有一个嵌套的组件。但是我想将这个菜单组件导入到另一个组件中,这个组件是一个标题组件,但是在 Strapi headless cms 中显示错误。Strapi 只允许一个嵌套的组件。他们不允许将一个嵌套的组件导入到另一个嵌套的组件中。我该怎么办?如果有任何解决方案,请分享。
这里的问题在于,默认情况下 Strapi 只允许深度级别为 2。这是一项功能,而不是错误,以确保您的应用程序可以平稳运行和加载,而无需通过多个深度级别进行渲染。
更多信息也可在讨论论坛上找到:Strapi Depth Level Discussion
但是,作为一种解决方法,您可以使用补丁来允许更高的深度级别,在彼此上嵌套多个组件。
以下是您需要执行的步骤:
yarn add patch-package
或 npm i patch-package --save
"postinstall": "patch-package"
。这将允许 patch-package 命令在每次您执行 npm install
后自动运行。patches/@strapi+plugin-content-manager+4.0.4.patch
diff --git a/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js b/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
index df4b28e..c0910f0 100644
--- a/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
+++ b/node_modules/@strapi/plugin-content-manager/server/services/entity-manager.js
@@ -1,6 +1,7 @@
'use strict';
const { assoc, has, prop, omit } = require('lodash/fp');
+const merge = require('lodash/merge');
const strapiUtils = require('@strapi/utils');
const { ApplicationError } = require('@strapi/utils').errors;
@@ -39,13 +40,15 @@ const findCreatorRoles = entity => {
return [];
};
+const deepMerge = (oldData, newData) => oldData ? merge(oldData, newData) : newData;
+
// TODO: define when we use this one vs basic populate
const getDeepPopulate = (uid, populate, depth = 0) => {
if (populate) {
return populate;
}
- if (depth > 2) {
+ if (depth > 4) {
return {};
}
@@ -73,7 +76,7 @@ const getDeepPopulate = (uid, populate, depth = 0) => {
if (attribute.type === 'dynamiczone') {
populateAcc[attributeName] = {
populate: (attribute.components || []).reduce((acc, componentUID) => {
- return Object.assign(acc, getDeepPopulate(componentUID, null, depth + 1));
+ return deepMerge(acc, getDeepPopulate(componentUID, null, depth + 1));
}, {}),
};
}
patches/@strapi+plugin-content-type-builder+4.0.4.patch
diff --git a/node_modules/@strapi/plugin-content-type-builder/admin/src/components/SelectComponent/index.js b/node_modules/@strapi/plugin-content-type-builder/admin/src/components/SelectComponent/index.js
index 0c692d8..5d96d05 100644
--- a/node_modules/@strapi/plugin-content-type-builder/admin/src/components/SelectComponent/index.js
+++ b/node_modules/@strapi/plugin-content-type-builder/admin/src/components/SelectComponent/index.js
@@ -47,11 +47,11 @@ const SelectComponent = ({
return [...acc, ...compos];
}, []);
- if (isAddingAComponentToAnotherComponent) {
- options = options.filter(option => {
- return !componentsThatHaveOtherComponentInTheirAttributes.includes(option.uid);
- });
- }
+ // if (isAddingAComponentToAnotherComponent) {
+ // options = options.filter(option => {
+ // return !componentsThatHaveOtherComponentInTheirAttributes.includes(option.uid);
+ // });
+ // }
if (isTargetAComponent) {
options = options.filter(option => {
diff --git a/node_modules/@strapi/plugin-content-type-builder/server/controllers/validation/types.js b/node_modules/@strapi/plugin-content-type-builder/server/controllers/validation/types.js
index 735f4ea..faab13f 100644
--- a/node_modules/@strapi/plugin-content-type-builder/server/controllers/validation/types.js
+++ b/node_modules/@strapi/plugin-content-type-builder/server/controllers/validation/types.js
@@ -237,12 +237,12 @@ const getTypeShape = (attribute, { modelType, attributes } = {}) => {
const targetCompo = strapi.components[compoUID];
if (!targetCompo) return true; // ignore this error as it will fail beforehand
- if (modelType === modelTypes.COMPONENT && hasComponent(targetCompo)) {
- return this.createError({
- path: this.path,
- message: `${targetCompo.modelName} already is a nested component. You cannot have more than one level of nesting inside your components.`,
- });
- }
+ // if (modelType === modelTypes.COMPONENT && hasComponent(targetCompo)) {
+ // return this.createError({
+ // path: this.path,
+ // message: `${targetCompo.modelName} already is a nested component. You cannot have more than one level of nesting inside your components.`,
+ // });
+ // }
return true;
},
})
yarn install
或 npm install
yarn build
或 npm run build
在 GitHub 的 lukasz-mical 在 Strapi Issues 下找到了这些解决方案。对我的应用程序非常有效,希望对你也有用 :)
从UI界面上来说是不可能的,因为它仍然有两级嵌套的限制。但是你可以直接在模式文件中完成它。 这是我项目中的一个例子。
这里的模式文件如下所示:主组件
{
"collectionName": "components_product_upload_boxes",
"info": {
"displayName": "productUploadBox",
"icon": "chevron-circle-up"
},
"options": {},
"attributes": {
"title": {
"type": "string",
"column": {
"type": "text"
}
},
"boxTitle": {
"type": "string",
"column": {
"type": "text"
}
},
"productUploadSteps": {
"type": "component",
"repeatable": true,
"component": "components.upload-section"
}
}
}
主模式文件中提到了upload-section.json
{
"collectionName": "components_upload_sections",
"info": {
"displayName": "uploadSection",
"icon": "cash-register"
},
"options": {},
"attributes": {
"title": {
"type": "string",
"column": {
"type": "text"
},
"required": true
},
"textContent": {
"type": "richtext"
},
"imageStepsBox": {
"type": "component",
"repeatable": true,
"component": "components.image-steps-box"
}
}
}
image-steps-box
文件架构
{
"collectionName": "components_image_steps_boxes",
"info": {
"displayName": "imageStepsBox",
"icon": "chart-area"
},
"options": {},
"attributes": {
"steps": {
"type": "component",
"repeatable": true,
"component": "components.step-content"
},
"image": {
"type": "media",
"allowedTypes": ["images", "files", "videos"],
"multiple": false,
"required": false
}
}
}
同样地,我也有关于step-content
的进一步组件。
这里的主要问题是您需要在组件模式文件中手动添加组件,然后您可以添加任意数量的子组件。