javascript - 将数组转换为由字符串分隔的 React 组件数组

Question

如何转换如下所示的字符串数组

var players = ['ronaldo','messi','naymar','suarez','ozil']

进入如下所示的jsx语句

<b>ronaldo</b> and <b>messi</b> and <b>naymar</b> and <b>suarez</b> and <b>ozil</b> and <b></b>

我尝试使用 .map 和 .join 如下所示

players.map(player => <b>player</b>).join('and');

但是结果是这样的

[object Object] and [object Object] and [object Object] and [object Object]......

我怎样才能做到这一点？提前致谢

Answer 1

join 将数组的所有元素连接到一个字符串中，因此很难将其与 JSX 一起使用，因为 JSX 只是一堆 React.createElement 调用在幕后。

你可以使用 React.Fragment而是为数组中除最后一个之外的所有条目添加 和 。

players.map((p, index) => (
  <Fragment>
    <b> {p} </b> {players.length - 1 !== index && "and"}
  </Fragment>
));