javascript - 为什么放置 div 标签可以让此 React 代码编译？

Question

我自己找到了问题的解决方案，但我很困惑为什么它有效，并且想了解更多信息。

我的以下代码存在运行时错误:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]
    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return(
      {jsx}
    )
  }
}

对此，我得到“错误:对象作为 React 子项无效(发现:带有键 {jsx} 的对象)。如果您打算渲染子项集合，请改用数组。”

但是，如果我这样做:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]
    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return(
      <div>
        {jsx}
      </div>
    )
  }
}

它有效，输出 123在页面上。为什么我需要 <div>标签？不是 jsx变量是否有将其插入 html 所需的标签？

Answer 1

那是因为你实际上返回了一个对象

考虑一下:

class ExampleClass extends React.Component {
  render() {
    const foo = [1, 2, 3]

    const jsx = foo.map((num) =>
      <span key={num}>
        {num}
      </span>
    );

    return ({jsx})
  }
}

您返回的对象只有一个名为 jsx 的键，变量值为 jsx之前声明过。

每个 JSX 都应该在其最外层包装器处返回:

1. 一对标签:

const Component = () => {
return (
<div>
...JSX
</div>
)
}

一个React.Fragment :

const Component = () => {
return (
<>
...JSX
</>
)
}

组件:

const Component = () => {
return (
<ReturnedComponent />
)
}