React组件渲染空

Question

当我试图在另一个组件中使用它们时，我的反应组件呈现空白时出现问题。

例子：

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      <loadMore /> 
     </p> 
     </div> 
    ); 
    } 
} 

class loadMore extends Component { 
    render() { 
     return (
      <p>Pirate</p> 
     ) 
    } 
} 

export default App; 

现在我在这里的输出为：

但是我其实期待是<loadmore></loadmore>标签与<p>Pirate</p>被填充，但他们只是出现空的，我不能似乎能够让它出现。

我在这里错过了什么？

Answer 1

反应类必须以大写字母开头。 :)

Answer 2

React预计所有组件都要大写，只需在extension类和jsx中将loadMore更改为LoadMore