Atom Beautify 插件破坏了我的 React html答案

【问题标题】：Atom Beautify plugin breaks my React htmlAtom Beautify 插件破坏了我的 React html
【发布时间】：2017-09-28 06:02:38
【问题描述】：

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

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

哪里有问题？可能是 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>

Gist to that files

【问题讨论】：

控制台说什么？
呃...您应该真正了解分号以及如何使用它们。关闭你的陈述。 var variable = 'value';

标签： javascript html reactjs atom-editor atom-beautify

【解决方案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>

【讨论】：

似乎正确。返回后不能直接换行。第二个红框应该不会引起任何问题（函数调用括号后的换行是可以的）。
最后我将 React.DOM.render 移到了新的一行，它可以工作了。

【解决方案2】：

在第二个 sn-p 中，将ReactDOM.render 换行。

【讨论】：

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