我正在开发一个设计系统,只是了解码件的思维方式。
我们正在使用 Nunjucks 和 Fractal。
我们有一个现有的组件,一个 Accordion ,它从 JSON 对象获取数据。 Prop 是标题和内容。
我构建了一个组件,例如目录,它使用简单的循环从 ToC.config.js 文件中提取内容,显示样式链接列表。
我需要在折叠组件中包含这个新组件,ToC 有一个标题和一个包含每个链接的 url 和文本的数组。
目前,我刚刚从 Fractal 中的 Accordion View 复制了 HTML,但这可能不是正确的方法,但从视觉上看,它符合设计者的要求。
如果我将所有链接、HTML 和所有内容作为字符串放入配置中,我也可以正确渲染 Accordion ,但这也不是它应该工作的方式。
我想做的(这可能是正确的方法)是将 Accordion 拉进去并用我的 ToC 组件填充它。
{% render '@my-accordion', 'accordion: items' %}
没有做我想要的事情,我似乎不知道如何实现我需要的做。
像这样:
{% render '@my-accordion' %}
// Pass in data from ToC, somehow
{{ title: title }}
{% for item in items %}
{{ item.text etc }}
{% endfor %}
然后我将拥有我的 Accordion 组件,其中的标题、链接和 HTML 等都来 self 的 ToC 组件。抱歉上面的粗略伪,它更多的是我想做的事情的一个例子。我无法将代码复制到外部资源。
使用渲染似乎不是可行的方法,除非我错过了一些东西?我无法将列表作为字符串传递,因为它具有当前页面的类和 aria 等,内容作者将使用这些来构建页面。
朝着正确的方向稍微插入一下就好了。
最佳答案
您可以添加类似于include
和宏
的渲染
过滤器。
import 'nunjucks.min.js';
var env = new nunjucks.Environment({autoescape: true});
env.addFilter('render', function (template, ctx) {
const html = env.render(template, ctx); // try-catch
return env.filters.safe(html);
});
使用
// table.njk
<table>
{% for e in rows %}
{% 'row.njk' | render({row: e}) %}
{% endfor %}
</table>
// row.njk
<tr>
{% for c in row.cols %}
<td> {{ c.name }} </td>
{% endfor %}
</tr>
关于components - 在 Nunjucks & Fractal 中渲染另一个组件内的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67765904/