React.render() 不渲染组件答案

【问题标题】：React.render() not rendering componentReact.render() 不渲染组件
【发布时间】：2016-02-09 16:43:04
【问题描述】：

我正在尝试了解 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”？

【问题讨论】：

plnkr.co/edit/jb0mhDms1Gup7LDYrkGY?p=preview

标签： javascript reactjs react-jsx refluxjs

【解决方案1】：

JSX Transformer 在 Babel 中可用。通过使用 bower 安装 babel 来实现此功能，并添加以下内容：

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

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

在此之后组件正确呈现。

【讨论】：