React: blank space and line feed in Jsx

[Maplesog]

as we all know,the render function return a html.The problem is, when i type space after 'return' and then connect HTML fragment,there is no problem.But there will be an error Uncaught TypeError: Cannot read property 'getNativeNode' of null when i type enter to generate a new line and connect HTML fragment.I also checkout this

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.

Don'tforget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.

So,how to understand this problem?

[aweary]

But there will be an error Uncaught TypeError: Cannot read property 'getNativeNode' of null when i type enter to generate a new line and connect HTML fragment

Can you share a code snippet that causes this error for you?

[keyz]

The "more than one node" part seems like a duplicate of #2127

[Maplesog]

1.type space afer 'return',no problem.

2.make a new line,got an error.

and I got an error that a mentioned before.

[aweary]

@YeZhiqiuSev you get that error because you're breaking to a new line after a return statement. In Javascript the return value is required to be on (or start on) the same line as the return value.

Try this instead:

render: function() {
  return (
  <div className='main-content idc-instance-page'></div>
  )
}

This isn't unique to React, just a part of Javascript itself.

[Maplesog]

@Aweary Thank you.It's a javascript rule .Got It.