Atom Beautify 插件破坏了我的 React html

Question

当我刚输入这个文件时，代码就可以工作了。使用 Atom 的美化插件时，代码不起作用。

我正在尝试比较这些文件，但无论如何找不到我的错误。

哪里会出问题？可能是 Beautify blocks transpiler 之类的？

//This is unstyled and working version.

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

  <title>React components</title>
</head>

<body>
  <div id='react-container'></div>
  <script type="text/babel">
              var MyComponent = React.createClass({
                  render() {
                      return <div>
                          <h1>{this.props.text}</h1>
                          <p>{this.props.children}</p>
                      </div>
                  }
              })
          ReactDOM.render(<div>
            <MyComponent text ="Hello World">My</MyComponent>
          <MyComponent text ="Hello World">Name is</MyComponent>
          <MyComponent text ="Hello World">Anatoly</MyComponent></div>,
        document.getElementById('react-container'))
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

  <title>React components</title>
</head>

<body>
  <div id='react-container'></div>
  <script type="text/babel">
    var MyComponent = React.createClass({ render() { return
    <div>
      <h1>{this.props.text}</h1>
      <p>{this.props.children}</p>
    </div>
    } }) ReactDOM.render(
    <div>
      <MyComponent text="Hello World">My</MyComponent>
      <MyComponent text="Hello World">Name is</MyComponent>
      <MyComponent text="Hello World">Anatoly</MyComponent>
    </div>, document.getElementById('react-container'))
  </script>
</body>

</html>

Gist to that files

Answer 1

 <script type="text/babel">
    var MyComponent = React.createClass({ render() { return <div>
      <h1>{this.props.text}</h1>
      <p>{this.props.children}</p>
    </div>
    } }) 
    ReactDOM.render(<div>
      <MyComponent text="Hello World">My</MyComponent>
      <MyComponent text="Hello World">Name is</MyComponent>
      <MyComponent text="Hello World">Anatoly</MyComponent>
    </div>, document.getElementById('react-container'))
  </script>

Answer 2

在第二个片段中，将 ReactDOM.render 换行。

Atom Beautify 插件破坏了我的 React html

Atom Beautify plugin breaks my React html

html

javascript

reactjs

atom-editor

atom-beautify