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>
));

Answer 2

有两种方法可以实现此目的，一种是使用纯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 3

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

这是JSfiddle链接。您可以here对其进行编辑。

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

使用<b>渲染Array.map()元素，并使用CSS ::before伪元素在它们之间添加“ and”。

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 5

您可以尝试

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 6

这是一种方法

.btn:disabled { box-shadow: none; }

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

6 个答案: