在 Nunjucks & Fractal 中渲染另一个组件答案

【问题标题】：Rendering a component inside another in Nunjucks & Fractal在 Nunjucks & Fractal 中渲染另一个组件
【发布时间】：2021-08-18 07:08:38
【问题描述】：

我正在开发一个设计系统，只是想了解组件的思维方式。

我们正在使用 Nunjucks 和 Fractal。

我们有一个现有的组件，一个从 JSON 对象获取数据的手风琴。道具是标题和内容。

我已经构建了一个组件，例如一个目录，它使用一个简单的循环从 ToC.config.js 文件中拉入显示样式链接列表。

我需要在手风琴组件中包含那个新组件，ToC 有一个标题和一个包含每个链接的 url 和文本的数组。

目前我只是从 Fractal 中的手风琴视图中复制了 HTML，但这可能不是要走的路，但在视觉上它是设计师所要求的。

如果我将所有链接、HTML 和所有链接作为字符串放在配置中，我也可以正确渲染手风琴，但这也不是它应该工作的方式。

我想要做的（这可能是正确的方法）是将手风琴拉入并用我的 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 %}

然后我将拥有我的手风琴组件，它的标题、链接和 HTML 等来自我的 ToC 组件。很抱歉上面的粗略伪，这更像是我想做的一个例子。我无法将代码复制到外部资源。

使用渲染似乎不是要走的路，除非我错过了什么？我无法将列表作为字符串传递，因为它具有当前页面的类和 aria 等，内容作者将使用这些构建页面。

向正确的方向稍微轻推会很棒。

【问题讨论】：

标签： components templating nunjucks atomic-design

【解决方案1】：

您可以添加类似于include 和macro 的render 过滤器。

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>

【讨论】：