React.js 变量 [重复]

【问题标题】：React.js variable [duplicate]React.js 变量 [重复]
【发布时间】：2015-10-12 17:38:55
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案1】：

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

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

要渲染一个 React 组件，只需创建一个以大写字母开头的局部变量：
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
React 的 JSX 使用大写与小写的约定来区分本地组件类和 HTML 标签。

【讨论】：