0

当我只是输入这个文件时，代码就起作用了。使用 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>

该文件的要点

4

2 回答 2

3

问题截图

 <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-28T06:33:59.270 回答
0

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

于 2017-09-29T01:02:25.533 回答