Riot.js：在不同的父标签中重复使用子标签名称

Question

我正在做一个小的 ui 项目。所以我开发了 'form-accordion' 标签，用于以下方式：

<form-accordion>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-accordion>

现在我想定义另一个标签 'form-tabs'，我想按以下方式使用它：

<form-tabs>
    <panel label='panel 1'>
    ...
    </panel>
    <panel label='panel 2'>
    ...
    </panel>
</form-tabs>

我的问题是：如何定义两个不同的标签 'panel'，它们将在不同的父标签下呈现不同的方式。

Answer 1

我认为有不同的方法可以做到这一点，但基本上你会在你的子标签中定义一个脚本并且该脚本接收一些指示更改的东西，之后，panel.tag 的脚本将处理你的内容.编写该代码的一种方法：

文件：panel.tag

<panel>
  <div>
    Your HTML here
  </div>
  
  <script>
    this.on('mount', function(){
      //write your code to handle content here
      if(opts.type == 1)
      {
         // do something
      }
      else if(opts.type == 2)
      {
         // do something else
      }
    });
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

因此，当您调用该标签时，您会发送一些内容来更改您的内容，例如属性：

文件：表格-accordion.tag

<form-accordion>
  <panel type="1">
  </panel>
</form-accordion>

文件：表格-tabs.tag

<form-tabs>
  <panel type="2">
  </panel>
</form-tabs>

另一种方法是使用更好的防暴功能，例如：

文件：panel.tag

<panel>
  <div>
     <div if={opts.type == 1}>
       Panel 1
     </div>
     <div if={opts.type == 2}>
       Panel 2
     </div>
  </div>
  
  <script>
    // 
  </script>

  <style>
    /* CSS class of that tag */
  </style>
</panel>

编辑

我再次阅读了您的问题，也许简单的方法更适合您的需求，该代码只需将您的标签写在 panel.tag 的 HTML 上：

文件：panel.tag

<panel>
  <div>
     { opts.label }
  </div>
</panel>

Answer 2

嘿，我想优化你的代码，而不是多次调用面板标签（取决于你想看到的面板标签的数量），你可以使用 riot 的 each 关键字创建一个简单的循环来创建您要使用的面板数量...如下所示 form-accordion & form-tabs 标签。我们可以将循环中的 panelNum 作为标记 opts 数组的一部分传递给您调用的 arg label

<form-accordion>
    <div each={panelNum in NumOfPanelsNeeded}>
        <panel label={panelNum}> ... </panel>
    </div>
</form-accordion>

<form-tabs>
    <div each={panelNum in NumOfPanelsNeeded}>
        <panel label={panelNum}> ... </panel>
    </div>
</form-tabs>

然后，在著名的 panel 标签中，我们可以从 opts 数组中检索此 label arg，然后最终将其显示在标签 html 中。

<panel>
    <div>panel { label }</div>

    <script>
        this.label = opts.label
    </script>
</panel>

就这么简单！ ;) 如果您需要帮助了解如何在 javascript 中将事件处理程序从子级添加到父级，请告诉我。

Riot.js：在不同的父标签中重复使用子标签名称

Riot.js: Reusing children tag names within different parent tags

javascript

riot.js

riot

另一种方法是使用更好的防暴功能，例如：

编辑