React 组件渲染为空答案

【问题标题】：React Component Rendering EmptyReact 组件渲染为空
【发布时间】：2017-01-25 21:07:00
【问题描述】：

当我尝试在另一个组件中使用它们时，我的 react 组件呈现为空时遇到问题。

例子：

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>，但它们只是显示为空，我似乎无法让它出现。

我在这里错过了什么？

【问题讨论】：

标签： javascript jquery html css reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：