Question

假设我有

const bold = content => <b>{content}</b>;
const aside = content => <aside>{content}</b>;

现在，我写道：

aside("hello world");

一切都正常。

接下来，假设我想在一旁呈现组件列表：

const bold = content => <b>{content}</b>;
const aside_items = ???

这样我写的时候：

aside_items([bold("hello"), bold("world")]);

生成以下HTML：

<aside>
  <b>hello</b>
  <b>world</b>
</aside>

如何实施const aside_items = ???？

Answer 1

这将迭代const aside_items = (items) => { let arr = []; for (let i in items) { arr.push(items[i]); } return '<aside>' + arr.join('') + '</aside>'; }数组并返回一个HTML标记字符串：

$('.section').on('click', function(e){
  $(this).toggleClass('expanded');
})


  $(".collapsible").collapsible({accordion: true});
  $(".collapsible").click(function(e){
      e.stopPropagation();
  });

Answer 2

不确定您是否使用JSX，但如果不是，则可以使用Template literals，然后只使用join数组项来表示字符串。

const bold = content => `<b>${content}</b>`;
const aside_items = content => `<aside>${content.join('')}</aside>`

const items = aside_items([bold("hello"), bold("world")]);
document.body.innerHTML += items;

Javascript：呈现组件列表

2 个答案: