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

来自 React documentation 下的 HTML 标签 vs. React 组件 header:

To render a React Component, just create a local variable that starts with an upper-case letter:
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

React.js 变量

React.js variable

javascript

reactjs

react-jsx