Я не могу импортировать компоненты в React

Question

Привет, ребята, это мой файл приложения:

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

См. документацию для получения дополнительной информации.

Answer 2

Компоненты Должны быть именами, начинающимися с заглавных букв, иначе они будут рассматриваться как HTML-теги, такие как h2.р и т. д.

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

экспорт по умолчанию Test2;