Question

尝试获取组件工作的基本示例。以下步骤是我所遵循的各种入门指南的组合

如下设置节点依赖性

 "dependencies": {
    "http-server": "~0.8.0",
    "forever": "0.14.1",
    "gulp": "^3.9.0",
    "gulp-chmod": "^1.2.0",
    "gulp-inject": "^1.3.1",
    "gulp-useref": "^1.2.0",
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-copy": "0.8.0",
    "grunt-ssh-deploy": "~0.2.8",
    "react": "15.1.0"

  },

index.html看起来像这样

 <!DOCTYPE html>
<html>

    <body>
     <div id="outer-container">
    <h1>This is the outer container</h1>
  </div>
  <script type="text/javascript" src="dist/react-dom.js"></script>
  <script type="text/javascript" src="dist/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script type="text/babel" src="js/components/outerContainer.js"></script>

//组件js文件

  var Hello = React.CreateClass({
    render: function() {
        return <div> 
        <h1> Hello at {this.props.now} </h1>
        </div>
    }

});


ReactDOM.render(<Hello now = { new Date().toString()} />, 
    document.getElementById('outer-container'));

错误输出时出现以下错误

react-dom.js:41 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined

和

 Uncaught TypeError: React.CreateClass is not a function

我试图在客户端上使用它。我看到两个源文件都在浏览器中加载

Answer 1

好像您所遵循的指南可能有点过时了。这里有几件事：

ReactDOM.render已经有一段时间了。将组件呈现给DOM的当前方法是使用ReactDOM.render( <Hello now={new Date().toString()} />, document.getElementById('outer-container') );：
```
react.CreateClass
```
您遇到区分大小写的问题：当方法实际为React.createClass时，您正在调用document.getElementById。 JavaScript是一种区分大小写的语言。
您需要在要将组件渲染到的div之后放置脚本标记。由于您的脚本文件是内联执行的，因此对text/jsx的调用将失败，因为页面上尚不存在该元素。

脚本标记使用type类型，浏览器无法原生理解。您需要包含浏览器支持的jsx处理器。 Babel的browser.js应该有效，但您需要将text/jsx从text/babel更改为<!DOCTYPE html> <html> <head> <title> P4 Web Query </title> </head> <body> <div id="outer-container"> <h1>This is the outer container</h1> </div> <script type="text/babel" src="js/components/outerContainer.js">/script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> </body> </html>：

body .fc { font-size: 1.5em; <--- change here for general }

ReactJS入门

1 个答案: