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

Question

After transpiling this code doesn't work

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

ReactDOM.render(, document.getElementById('content'));

这段代码是使用ReactDOM将一个名为“firstLow”的组件渲染到id为“content”的HTML元素中。

but this does

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

在第一个例子中，Babel生成的代码如下：

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

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

在页面上有一个空的<firstLow data-reactroot><firstLow/>元素被渲染。

在第二种情况下。

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

它有效了。我的组件已经被渲染。

发生了什么？

- Piotr Perak

Answer 1

发生了什么事？

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

来自文档:

注意：

始终使用大写字母开头的组件名称。

例如，<div />表示DOM标记，但<Welcome />表示组件并且需要Welcome在范围内。

- Felix Kling

---

谢谢。我在这上面至少浪费了4个小时。 - Piotr Perak

Answer 2

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

因此，<foo>被翻译为createElement('foo')，而<Foo>则产生createElement(module.Foo)。

您应该使用大写字母命名组件。没有太多其他要做的事情。

- salezica

---

Felix Kling在13秒前回答了，所以我接受了他的答案。但还是谢谢！ - Piotr Perak