Реагировать - Ребенок не отображается правильно

Question

Я не вижу текст внутри дочернего компонента.Дочерний объект отображается с размером 0x0 и пустым.

Это вызвано реакцией маршрутизатора?

Это мой код:

---

App.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import home from './pages/home/home';
import repoDetails from "./pages/repoDetails/repoDetails";

export default class App extends Component {
  render() {
      return (
              <Router>
                  <Switch>
                      <Route exact path="/" component={home}/>
                      <Route path="/:owner/:repo" component={repoDetails}>
                      </Route>
                  </Switch>
              </Router>
      );}}

---

repoDetails.js:

import React, {Component} from 'react';
import committersCard from '../../components/committersCard.js'

export default class repoDetails extends Component {

render() {
    return (
        <div>
            <committersCard/>
        </div>
    )}}

---

Это дочерний committersCard.js:

import React, {Component} from 'react';
export default class committersCard extends Component {

render() {
    return (

        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}

---

Я использую реагированиероутер 4.

Answer 1

Если вы собираетесь использовать пользовательские компоненты, они ДОЛЖНЫ начинаться с заглавной буквы.

Из официальных документов

Примечание. Всегда запускать компонентимена с заглавной буквой.

React рассматривает компоненты, начинающиеся с строчных букв, как теги DOM.Например, представляет тег HTML div, но представляет компонент и требует, чтобы Welcome находился в области действия.

Подробнее об обосновании этого соглашения можно прочитать здесь .

Итак, замените имена ваших компонентов на:

import React, {Component} from 'react';
import CommittersCard from '../../components/CommittersCard.js'

export default class RepoDetails extends Component {

render() {
    return (
        <div>
            <CommittersCard/>
        </div>
    )}}

и

import React, {Component} from 'react';
export default class CommittersCard extends Component {

render() {
    return (

        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}

Answer 2

Основное правило: Каждое имя компонента должно начинаться с заглавной буквы

Answer 3

Ваш пользовательский элемент должен начинаться с заглавной буквы, а имя вашего класса также должно начинаться с заглавной буквы

---

repoDetails.js:

import React, {Component} from 'react';
import CommittersCard from '../../components/committersCard.js'

export default class RepoDetails extends Component {

render() {
    return (
        <div>
            <CommittersCard />
        </div>
    )}}

---

committersCard.js

import React, {Component} from 'react';
export default class CommittersCard extends Component {
render() {
    return (
        <div style={{height: '150px', width: '200px'}}>
            <h1>TEXT INSIDE THE CHILD COMPONENT</h1>
        </div>
    );}}*

---

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import home from './pages/home/home';
import RepoDetails from "./pages/repoDetails/repoDetails";

export default class App extends Component {
  render() {
      return (
              <Router>
                  <Switch>
                      <Route exact path="/" component={home}/>
                      <Route path="/:owner/:repo" component={RepoDetails} /> //fixed
                      </Route>
                  </Switch>
              </Router>
      );}}

---

Причина:

Когда начинается тип элементас буквой в нижнем регистре это относится к встроенному компоненту, подобному или, и приводит к строке 'div' или 'span', переданной в React.createElement.Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

Мы рекомендуем присваивать имена компонентов заглавной буквой.Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной перед использованием в JSX.

В соответствии с пользовательские компоненты должны быть заглавными