反应 - 孩子没有正确呈现

Question

我看不到子组件内的文本。子元素以 0x0 大小呈现，为空。

是不是 react router 造成的？

这是我的代码：

---

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

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

Answer 2

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

---

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

---

原因是：

当一个元素类型以小写字母开头时，它指的是一个 内置组件，如 or 并导致字符串 'div' 或“跨度”传递给 React.createElement。以 a 开头的类型 大写字母，如编译为 React.createElement(Foo) 和 对应于您的 JavaScript 文件中定义或导入的组件。

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

根据User-Defined Components Must Be Capitalized

Answer 3

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

来自official docs

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

React 将以小写字母开头的组件视为 DOM 标签。 例如，表示一个 HTML div 标签，但是 表示一个组件，并且需要 Welcome 在范围内。

您可以阅读更多关于此约定背后的原因here。

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

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