Question

大家好，这是我的App文件：

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]

Answer 1

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

<test2 />

等同于

React.createElement("test2", null);

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

你想要

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

等效于

React.createElement(Test2, null);

有关更多信息，请参见the documentation。

Answer 2

Components应该是以大写字母开头的名称，否则将被视为类似于h2的html标签。 p等...

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

导出默认的Test2;

我无法在React中导入组件

2 个答案: