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. 开始，大写组件是 React 区分组件和 HTML 标签的约定。

来自HTML 标签与 React 组件标题下的React 文档：

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

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

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