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

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'));

在第一种情况下,巴贝尔生产

_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中的约定.小写名称转换为字符串(标记),大写名称解析为变量(组件).

来自文档:

警告:

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

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

Answer 2

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

这就是为什么<foo>被翻译成createElement('foo'),而<Foo>收益率createElement(module.Foo).

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