React-未正确渲染子对象

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

这是child 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

经验法则：每个组件名称都应该以大写字母开头

Answer 2

自定义元素必须以大写字母开头，类名也应该以大写字母开头

repotails.js:

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

export default class RepoDetails extends Component {

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

代码ard.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>
    );}}*

一个pp.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>
      );}}

原因是：

当一个元素类型以小写字母开头时，它引用一个内置组件，如or，并导致传递给React.createElement的字符串'div'或'span'。以大写字母开头的类型，如compile to React.createElement（Foo），并与JavaScript文件中定义或导入的组件相对应。

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写变量。

根据用户定义，组件必须大写

Answer 3

如果要使用自定义组件，它们必须以大写字母开头。

从官方文件

注意：组件名称始终以大写字母开头。

React将以小写字母开头的组件视为DOM标记。例如，表示一个HTMLdiv标记，但表示一个组件，需要欢迎才能进入范围。

你可以在这里阅读更多关于这个惯例背后的原因。

因此，将组件的名称替换为：

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