子コンポーネント内のテキストが表示されません。子はサイズ0x0で空にレンダリングされます。
それはreactルーターが原因ですか？
これは私のコードです：
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>
);}}
私はreactrouter4を使用しています。
経験則：すべてのコンポーネント名は大文字で始める必要があります
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加