当我仅键入此文件时,代码即可工作。
当将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>





Gist to that files

最佳答案

javascript - Atom Beautify插件破坏了我的React html-LMLPHP

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

10-06 12:33