Конвертировать массив в массив компонентов 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

Вы можете просто попробовать с ним

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

даст вам результат -

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

Answer 2

Визуализация элементов <b> с использованием Array.map() и добавление «и» между ними с использованием псевдоэлемента CSS ::before.

const players = ['ronaldo','messi','naymar','suarez','ozil'];

const Demo = ({ players }) => (
  <p>
  {
    players.map(player => (
      <b>{ player }</b>
    ))
  }
  </p>
);

ReactDOM.render(
  <Demo players={players} />,
  demo
);

b:not(:last-child)::after {
  font-weight: normal;
  content: ' and ';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 3

Я бы порекомендовал вам использовать карту (). Просто используйте функцию map () и возвращайте все, что хотите.

Вот ссылка JSfiddle. Вы можете отредактировать его здесь .

https://jsfiddle.net/mustkeom/pqLhw3dg/

<div id="app">test</app>

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

    let allPlayers = players.map((item, index)=>{

    return <React.Fragment> <b> {item} </b> { index < players.length-1 && 'and'  } </React.Fragment>

    })



ReactDOM.render(
  allPlayers,
  document.getElementById('app')
);

Просто так. Fragment - это просто оболочка, которая не будет отображаться сама по себе.

Answer 4

Вот два способа добиться этого: один с использованием простой композиции HTML, другой с использованием массива массивов:

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

class App extends React.Component {
  render() {
    return (
      <div>
      <span dangerouslySetInnerHTML={{ __html: players.map(player => `<b>${player}</b>`).join(' and ') }} /><br/>
        { players.map((player, i) => [<b>{player}</b>, i < players.length - 1 && " and "]) }
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 5

Вот способ сделать это

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

Answer 6

join объединяет все элементы массива в строку, поэтому будет трудно использовать это с JSX, поскольку JSX - это просто набор React.createElement вызовов под капотом.

Вместо этого можно использовать React.Fragment и добавить and для всех записей в массиве, кроме последней.

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