javascript - RiotJS生成空输出

Question

我为 Bootstrap 4 开发 RiotJS 包装器。您可以在 Plunker 上查看一个实时示例。有一个自定义标签

<item>
    <a class="dropdown-item" href="#">
        <yield/>
    </a>
</item>

我以以下方式使用它：<item>Action</item>. 得到以下输出：

<item>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> </a>
    <a class="dropdown-item" href="#"> Action </a>
</item>

有谁知道为什么会生成前 2 个空链接以及如何避免它们？

Answer 1

它与您的标签的安装有关，以及<yield />. 不确定这里的确切问题，但解决问题的方法是仅安装最外面的标签，不要显式安装每个子标签。

因此，index.html在您的示例代码中，替换：

<script> riot.mount('caret'); riot.mount('divider'); riot.mount('heading'); riot.mount('item'); riot.mount('content'); riot.mount('toggle'); riot.mount('dropdown'); </script>

... 和：

<script> riot.mount('dropdown'); </script>