请教：有没有办法在页面中直接使用jsx中的class

#1 
<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="demo">
    loading...
</div>

<script src="demo/jquery-1.8.2.js"></script>
<script src="//unpkg.com/react/dist/react.js"></script>
<script src="//unpkg.com/react-dom/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="demo.js"></script>
<script type="text/babel">
    $(function () {
        ReactDOM.render(<Demo />, document.getElementById('demo'))
    })
</script>
</body>
</html>

其中demo.js 是编译后的js.
而 <Demo /> 是jsx编译前的class :class Demo extends Component
因为项目需要，不能做全分离，只能在PHP或JSP页面中调用react组件进行渲染，这样开发比较友好，但这样调用各种报错；

————————————————————————————————————
error：Inline Babel script:3 Uncaught ReferenceError: Demo is not defined
————————————————————————————————————

而把

ReactDOM.render(<Demo />, document.getElementById('demo'))

写在jsx中正常编辑完成可以完成渲染

#2 
<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="demo">
    loading...
</div>

<script src="demo/jquery-1.8.2.js"></script>
<script src="//unpkg.com/react/dist/react.js"></script>
<script src="//unpkg.com/react-dom/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="demo.js"></script>
<script type="text/babel">
    $(function () {
        ReactDOM.render(<Demo />, document.getElementById('demo1'))
    })
</script>
</body>
</html>
#3

唉。。。不能贴代码 上截图

#4

可能是引入的依赖不够吧

#5

babel 转码以后Demo就不认识了 唉，求老法师答疑解惑；

因为元素的ID只有在页面中动态生成的，在jsx中并不清楚它要去初始化哪个元素

#6

你把引用demo.js的那个script标签的type也设置成"text/babel"试试

#7

“你把引用demo.js的那个script标签的type也设置成"text/babel"试试”
这样也不行。。。。

因为也是刚开始玩耍所所以还不太了解

demo.js 是由 devServer.js 配置中

config.entry = {
  demo: [
    'webpack-hot-middleware/client',
    './demo/index.jsx'
  ]
};

index.jsx 生成的

其中包含了

import { Component } from 'react'
import ReactDOM from 'react-dom'
import {  Tree, Checkbox, RadioGroup, Icon  } from 'rctui'

这种写法。
而
import …
这种引用写法直接写在页面中则会报无法解析。。。

#8

那你加多个babelprolifill库试试

#9

还是我太天真了。最终换了另外一种变通方式。。。

loading...

直接把参数写在dom元素中
然后用 props + state 进行参数化渲染
初始化时用循环class方式一个一个初始化

#10

楼主学一下 Markdown 里标记代码的语法, 我用管理员权限先帮你改了.