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

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)。

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