React Component Rendering Empty

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

React类必须以大写字母开头。 ：）

Answer 2

React希望所有组件都可以大写，只需在extends类和jsx中将loadMore更改为LoadMore