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

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

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>

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

但结果是这样的

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

---

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

join

将数组中的所有元素连接成一个字符串，因此在JSX中很难使用这个字符串，因为JSX只是一堆

React.createElement

调用

您可以改为对数组中除最后一个之外的所有条目使用并添加

和

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

players.map（（p，index）=>(
{p} {players.length-1！==索引&&“和”}
));

这里有一个方法

players.map((player,index)=>(
    <div>
       <b>{data}</b>
       {(players.length-1) === i ? '' : ' and '}
    </div>))

players.map（（player，index）=>(
{data}
{（players.length-1）==i？''：'和'}
))

有两种方法可以实现这一点，一种是使用纯HTML组合，另一种是使用数组数组：

var玩家=[‘罗纳尔多’、‘梅西’、‘纳马尔’、‘苏亚雷斯’、‘厄齐尔’]；
类应用程序扩展了React.Component{
render（）{
返回(
`${player}`）。加入（'and'）}/>

{players.map（（player，i）=>[{player}，i

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}

---

我建议您使用map（）。只需使用map（）函数并返回所需的任何内容

这里是JSfiddle链接。你可以编辑它

测试
var球员=[‘罗纳尔多’、‘梅西’、‘纳马尔’、‘苏亚雷斯’、‘厄齐尔’]
让所有玩家=玩家。地图（（项目，索引）=>{
返回{item}{index

就这么简单。片段只是一个包装器，不会呈现自身。

使用

Array.map（）

呈现

元素，并使用CSS
：：在
伪元素之前在元素之间添加“and”


const-players=[‘罗纳尔多’、‘梅西’、‘纳马尔’、‘苏亚雷斯’、‘厄齐尔’]；
const Demo=（{players}）=>(

{
players.map（player=>(
{player}
))
}

);
ReactDOM.render(
,
演示
);
b:not（：最后一个孩子）：：之后{
字体大小：正常；
内容：'和'；
}
你可以试试看

var mapped = players.map((item)=>('<b>'+item+'</b>')).join("and");

var-mapped=players.map（（项目）=>（“”+item+“”））.join（“and”）；

你会得到结果-

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

罗纳尔多、梅西、纳马尔、苏亚雷斯、安多齐
我不想在结果的末尾加上第五个“and”。我只是提出了这个想法。我们可以有条件地处理这件事。我更新了答案。
<b>ronaldo</b> and<b>messi</b> and<b>naymar</b> and<b>suarez</b> and<b>ozil</b>