原子美化插件打破我的React html

当我只是输入这个文件，代码的作品。对Atom使用Beautify插件时，代码不起作用。原子美化插件打破我的React html

我想比较这些文件，但无论如何无法找到我的错误。

哪里可以成为问题？可能是美化阻止翻译或什么？

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

来源

2017-09-28 Anatoly Khalizev

控制台说什么？ –

呃...你应该真的了解分号以及它们是如何使用的。关闭你的陈述。 'var variable ='value';'< - 分号。使用它们。 –

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

来源

2017-09-28 06:33:59

似乎是正确的。返回后不能直接换行。第二个红色框不应该引起任何问题（函数调用括号后的换行符是确定的）。 –

最后，我将React.DOM.render移动到一个新行上，并且工作正常。 –

在第二个片段中，将ReactDOM.render放在一个新行中。

来源

2017-09-29 01:02:25

嘿，那里。将答案标记为有用的方法是将其标记为已接受，就像您已经做过的那样。请不要重复答案。 –

原子美化插件打破我的React html

回答

相关问题