Javascript 使用字符串连接时渲染对象数组

我有一个对象数组，例如：

const array = [<Button>abc</Button>, <Button>def</Button>]

我有一个按钮列表，每个按钮旁边都有

类似于此示例图片顶行的内容：

然而，我想加入按钮，使它看起来像底线。我尝试使用

array.join（“+”

），但不再渲染按钮，而是渲染

+

---

有可能这样做吗？请记住，数组需要循环以包含所有项，理想情况下，它知道不要在最后一个元素中添加

+

。

这是一个棘手的用例。我能够实现写条件内映射函数

  {array.map((item, index) => {
    if (index === array.length - 1) {
      return item;
    }
    return [item, "+"];
  })}

以下是工作示例链接： 试试这个

var btns = document.querySelectorAll("button");
var btnArray = [], btnString = "";

btns.forEach(curr => {
    btnArray.push(curr);
});

btnArray.forEach(curr =>{
    btnString += curr.innerText + "+";
});

btnString = btnString.substring(0, btnString.length - 1);
console.log(btnString);

使用join（）的简单方法如下所示

var btns = document.querySelectorAll("button");
var btnArray = [], btnText = [], btnString = "";

btns.forEach(curr => {
    btnArray.push(curr);
});

btnArray.forEach(curr =>{
    btnText.push(curr.innerText);
});

btnString = btnText.join(" + ");
console.log(btnString);

您想要两个按钮之间带“+”吗？按钮文本与“+”连接的单个按钮？没有按钮，只有与“+”连接的按钮文本？你能对预期的结果更明确一点吗？

var btns = document.querySelectorAll("button");
var btnArray = [], btnText = [], btnString = "";

btns.forEach(curr => {
    btnArray.push(curr);
});

btnArray.forEach(curr =>{
    btnText.push(curr.innerText);
});

btnString = btnText.join(" + ");
console.log(btnString);