JSX 里面的 Javascript 里面的 JSX答案

【问题标题】：JSX inside Javascript inside JSXJSX 里面的 Javascript 里面的 JSX
【发布时间】：2018-11-10 21:24:18
【问题描述】：

我正在尝试将 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 部分正确渲染，但 ({i + j}) 渲染为 [object Object]。我该如何修复它或如何使它以其他方式工作？

【问题讨论】：

函数会让这一切变得更简单

标签： javascript html reactjs jsx

【解决方案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>
    )
}

【讨论】：

【解决方案2】：

问题不在于 JSX，而在于表达式 {i * j + ({i + j})。 {i + j} 部分将转换为对象。您实际上是在尝试附加和反对一个数字，结果如下：

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

我不确定您要渲染什么，但如果您想将 i * j 部分附加到 span 您需要将它们放在一个数组中，或者只需将 i * j 包裹在大括号中并离开纯 JSX 中的 span 标签，而不是使用加号运算符。

【讨论】：

【解决方案3】：

您无需将span 包装在{} 中

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：