将数组转换为由string分隔的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,并添加and除最后一个之外的数组中的所有条目.

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