React.render() 不渲染组件

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'？

Answer 1

JSX Transformer 在 Babel 中可用。通过使用 Bower 安装 babel 并添加以下内容来实现此目的：

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

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

此后组件正确呈现。

React.render() 不渲染组件

React.render() not rendering component

javascript

reactjs

react-jsx

refluxjs