Atom Beautify插件破壞了我的React html

Question

當我僅鍵入此文件時，代碼即可工作。 當將Beautify插件用於Atom時，代碼不起作用。

我正在嘗試比較那些文件，但是無論如何都找不到我的錯誤。

哪里可能有問題？ 可能是Beautify區塊轉譯器之類的東西嗎？

 //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>

要旨

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

問題描述

2 個解決方案

解決方案1
3 已采納 2017-09-28 06:33:59

解決方案2
0 2017-09-29 01:02:25

Atom Beautify插件破壞了我的React html

問題描述

2 個解決方案

解決方案1 3 已采納 2017-09-28 06:33:59

解決方案2 0 2017-09-29 01:02:25

解決方案1
3 已采納 2017-09-28 06:33:59

解決方案2
0 2017-09-29 01:02:25