为什么放置一个 div 标签允许这个 React 代码编译？

Question

I found a solution to an issue on my own, but I am confused why it worked and would like to learn more.

I have the following code that has a run time error:

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

    return(
      {jsx}
    )
  }
}

To this, I get "Error: Objects are not valid as a React child (found: object with keys {jsx}). If you meant to render a collection of children, use an array instead."

However, if I instead do this:

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

It works, outputting 123 on the page. Why do I need a <div> tag? Doesn't the jsx variable have the tags necessary to insert it into html?

Answer 1

Thats because you are literaly returning a object

Consider this:

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

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

    return ({jsx})
  }
}

You are returning an object with only one key called jsx , with the value of the variable jsx declared just before.

Every JSX should return at it's outer most wrapper must be:

1. A pair of tags:

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

2. A React.Fragment :

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

3. A component:

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

Answer 2

When returning anything in jsx, it can only return one element. When returning only {jsx}, you are returning multiple span elements, which is not allowed.