Question

我无法让这个简单的类渲染。这是我的代码。

allView.js

var StatCard = React.createClass({
    render: function() {
        return  (
                <div class="card">
                    <div class="ui statistic">
                    <div class="value">4480</div>
                    </div>
                    <div class="header">Schools</div>
                    <div class = "meta">matcher</div>
                </div> 
            );
    }  

});

// console.log("Before ReactDOM.render"); -> It doesn't log anything 

ReactDOM.render( <StatCard />, document.getElementById('chartarea'));

HTML文件

<div id="chartarea"> </div>



</body>
<script type="text/jsx" src="static/js/all/allView.js"></script>

我对JS比较陌生，所以我无能为力。 在阅读了类似的问题和文档

后，我做了以下几点

大写变量
在脚本标记

type="text/jsx"

尝试使用type="text/babel"代替
将脚本标记放在不同的位置，即使将其放在最后也是合适的
检查并重新检查它替换的元素上的结束标记。
包含他们演示小提琴中给出的相关React文件。
检查控制台（所有加载状态代码为200的文件）

我放置了一个没有评论的console.log语句，但我的控制台上没有显示任何内容。

非常感谢任何帮助。

Answer 1

你是否包含了babel脚本？怎么样？

Answer 2

添加脚本类型=＆＃34; text / babel＆＃34; JS FIDDLE

<script type="text/babel" src="static/js/all/allView.js"></script>

简单的React组件无法呈现

2 个答案: