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

​

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