我创建了菜单组件。在菜单组件中还有一个子菜单组件，因此它有一个嵌套的组件。但是我想将这个菜单组件导入到另一个组件中，这个组件是一个标题组件，但是在 Strapi headless cms 中显示错误。Strapi 只允许一个嵌套的组件。他们不允许将一个嵌套的组件导入到另一个嵌套的组件中。我该怎么办？如果有任何解决方案，请分享。
3个回答
1
这里的问题在于，默认情况下 Strapi 只允许深度级别为 2。这是一项功能，而不是错误，以确保您的应用程序可以平稳运行和加载，而无需通过多个深度级别进行渲染。
更多信息也可在讨论论坛上找到：Strapi Depth Level Discussion
但是，作为一种解决方法，您可以使用补丁来允许更高的深度级别，在彼此上嵌套多个组件。
以下是您需要执行的步骤：
- 安装 patch-package
yarn add patch-package或npm i patch-package --save - 将脚本添加到您的 package.json 文件中
"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 - 删除 .cache 和 build 文件夹
- 构建管理员界面
yarn build或npm run build
在 GitHub 的 lukasz-mical 在 Strapi Issues 下找到了这些解决方案。对我的应用程序非常有效，希望对你也有用 :)
- nuvin.ga
1
从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的进一步组件。
这里的主要问题是您需要在组件模式文件中手动添加组件，然后您可以添加任意数量的子组件。
- Meher Chandan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接