Question

我试图了解React，Reflux和JSX。我有一个简单的文件，我想尝试并开始工作。

<html>
    <body>
        <div id="counter"></div>

        <script src="bower_components/react/react.js"></script>
        <script src="bower_components/reflux/dist/reflux.js"></script>
        <script src="bower_components/react-dom/react-dom.js"></script>

        <script type="text/jsx">
            var CounterComponent = React.createClass({
                render: function() {
                    return (
                        <div>Hello, world</div>
                    );
                }
            });

            React.render(<CounterComponent />, document.getElementById("counter"));
        </script>

    </body>
</html>

我已经设置了我的操作，商店和组件。但React.render()实际上并没有在我的div中创建任何内容。我已经注释掉了大部分代码，试图找出它没有渲染的原因。我没有错误，所以我认为它与jsx没有被看到有关...

任何想法为什么这无法呈现我的'＃hello world＆＃39;？

Answer 1

JSX Transformer可在Babel中使用。通过使用bower安装babel来完成此工作，添加以下内容：

<script src="bower_components/babel/browser.js"></script>

并将"text/jsx"更改为"text/babel"

在此之后，组件正确呈现。

React.render（）不呈现组件

1 个答案: