React 组件渲染为空

Posted 2023-03-05

【中文标题】React 组件渲染为空

【英文标题】：React Component Rendering Empty

【发布时间】：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"  />
          <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>，但它们只是显示为空，我似乎无法让它出现。

我在这里错过了什么？

【参考方案1】：

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

【参考方案2】：

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