Question

在编译之后，这段代码不起作用

import React from 'react';
import ReactDOM from 'react-dom';
import firstLow from './moniesApp.js';

ReactDOM.render(<firstLow />, document.getElementById('content'));

但确实如此

import React from 'react';
import ReactDOM from 'react-dom';
import FirstHigh from './moniesApp.js';

ReactDOM.render(<FirstHigh />, document.getElementById('content'));

在第一种情况下，babel产生

_reactDom2.default.render(_react2.default.createElement('firstLow', null), document...

并在页面上呈现了一个空的<firstLow data-reactroot><firstLow/>元素。

在第二种情况下

_reactDom2.default.render(_react2.default.createElement(_moniesApp2.default, null), document...

它有效。我的组件被渲染。

发生了什么？

Answer 1

发生了什么事？

这是JSX / React中的约定。小写名称转换为字符串（标记），大写的名称被解析为变量（组件）。

来自docs：

警告：

始终使用大写字母启动组件名称。

例如，<div />表示DOM标记，但是<Welcome />   代表一个组件，需要Welcome在范围内。

Answer 2

在React中，Component名称以大写字母开头。小写的JSX标记表示文字HTML标记。 这是React规范的一部分。

这就是<foo>被翻译为createElement('foo')，而<Foo>产生createElement(module.Foo)的原因。

您应该用大写字母命名您的组件。没什么可做的。

当名字不以大写字母开头时，导入不起作用

2 个答案:

警告：