Question

我有一个名单列表，我需要在其间用逗号返回，所以通常我只使用.join，但列表中的一个项目需要有一个明星的图标基于条件是否满足而无法在连接中起作用。是否有类似于我可以使用的连接，它不能将所有内容都变成字符串，以便显示HTML元素而不是返回名称，[对象，对象]＆＃39;？我尝试使用dangerouslySetInnerHTML，但它仍然只是说name, [Object, object]而不是name, <Icon name='star' />name2显示实际的星号，而不是组件的文本。

Answer 1

因此，如果Icon是另一个React元素，则应该将每个名称包装为<span>元素，这样当您遍历数组时，可以将Icon作为兄弟添加到正确的字符串内容中。

看起来像这样：

names.map((name, i) => {
   return <span key={i}>
           { 
            name === focusName ? // However you determine where the star goes
            <Icon name="star" /> :
            null
           }
           { // Add a comma to name if not last item
             name + (i < names.length - 1 ? ',' : '')
           } 
          <span>
});

你如何加入React中的字符串和HTML元素数组？

1 个答案: