JSX внутри Javascript внутри JSX

Question

Я пытаюсь использовать выражение JSX как часть сгенерированного тела другого выражения JSX:

render() {
    return (
      <table>
        {[...Array(5).keys()].map(i => <tr>{
          [...Array(7).keys()].map(j => <td>{
            i * j + (<span>{i + j}</span>)
          }</td>)
        }</tr>)}
      </table>
    )
}

Часть i * j отображается правильно, но (<span>{i + j}</span>) отображается как [object Object].Как я могу это исправить или как я могу заставить его работать по-другому?

Answer 1

render() {
    return (
      <table>
        {[...Array(5).keys()].map(i => <tr>{
          [...Array(7).keys()].map(j => <td>
            {i * j}+
            <span>{i + j}</span>
          }</td>)
        }</tr>)}
      </table>
    )
}

Answer 2

Проблема не в JSX, а в выражении {i * j + (<span>{i + j}</span>).Часть <span>{i + j}</span> будет преобразована в объект.Вы на самом деле пытаетесь добавить и возразить против числа, которое выглядит следующим образом:

1 + {} => 1.toString() + {}.toString() => "1[object Object]"

Я не уверен, что вы пытаетесь визуализировать, но если вы хотитедобавьте часть i * j к span, который необходимо поместить в массив, или просто заключите скобки i * j в фигурные скобки и оставьте тег span в чистом JSX вместо использования оператора плюс.

Answer 3

Вы не можете вернуть теги из {}.Попробуйте:

render() {
    return (
      <table>
        {[...Array(5).keys()].map(i => <tr>{
          [...Array(7).keys()].map(j => <td>
            {i * j}
            <span>{i + j}</span>
          </td>)
        }</tr>)}
      </table>
    )
}

Answer 4

Вам не нужно упаковывать span в {}

<table>
  {[...Array(5).keys()].map(i => (
    <tr>{ [...Array(7).keys()].map(j => (
      <td>
        {i * j} <span>{i + j}</span>
      </td>
     )
    )}
    </tr>
  )
  )}
</table>

Answer 5

class App extends React.Component{
  render(){
    return (
          <table>
            {[...Array(5).keys()].map(i => (<tr>{[...Array(7).keys()].map(j => (<td>{i*j}<span>{i + j}</span></td>))
            }</tr>))}
          </table>
        )

  }
}


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

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

поместите ваше выражение i*j внутри {}, а не span

render() {
    return (
      <table>
        {[...Array(5).keys()].map(i => <tr>{
          [...Array(7).keys()].map(j => <td>{i * j}<span>{i + j</span</td>)
        }</tr>)}
      </table>
    )
}