我无法在 React 中导入组件

Posted 2023-02-23

【中文标题】我无法在 React 中导入组件

【英文标题】：I cannot import components in React

【发布时间】：2019-07-01 00:59:52

【问题描述】：

大家好，这是我的应用文件：

import React,  Component  from 'react';
import test2 from './test2';
import './App.css';

class App extends Component 
  render() 
    return <test2 />;
  

export default App;

这是我的 test2 组件：

import React,  Component  from 'react';

class test2 extends Component 
  render() 
    return <div>hello</div>;
  

export default test2;

但由于某种原因，我在我的应用程序组件中看不到它， 有人看到错误吗？ 这就是我得到的： 'test2' 已声明，但它的值从未被读取。 [6133]

【参考方案1】：

这是一个 linter 警告。使用 JSX，自定义组件“标签”必须以大写字母开头。小写标记名称被视为字符串。

<test2 />

等价于

React.createElement("test2", null);

即这将传递字符串值"test2"，而不是解析为变量test2。

你想要

import Test2 from '...';
// ...
<Test2 />

相当于

React.createElement(Test2, null);

请参阅the documentation 了解更多信息。

【讨论】：

更多信息请见reactjs.org/docs/…。

【参考方案2】：

组件应该是以大写字母开头的名称，否则它将被视为像 h2 这样的 html 标签。等等……

class Test2 extends Component 
 render() 
   return <div>hello</div>;

导出默认Test2；