React.js变量

Question

当我使用以小写字母开头的变量时，该页面什么也没有显示。如果我将变量名称更改为以大写（HelloWorld）开头，则页面将显示内容。

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

 React.render(<helloWorld/> , document.body);
</script>

谁能告诉我为什么会这样？

Answer 1

从React v0.12。开始，大写组件是用于区分组件和HTML标记的React约定。

来自 HTML标记与反应组件标题下的React documentation：

  

要渲染React Component，只需创建一个以大写字母开头的局部变量：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));

     

React的JSX使用大写和小写约定来区分本地组件类和HTML标记。