javascript - 在 REACT 中渲染时遇到问题

Question

我无法渲染名为 Butcher Shop 的组件。我无法弄清楚我缺少什么以使其不为空或未定义。任何人都可以发现错误吗？没有任何内容打印到 DOM。这是我得到的错误: TypeError: Super expression must either be null or a function, not undefined.

40 | export class ButcherShop extends React.component{

import React from 'react';
import ReactDOM from 'react-dom';

const BUTCHER_PRODUCTS = [
  'Tenderloin',
  'Short ribs',
  'Beef shin',
  'Ribeye'
];

export class OlderCoaster extends React.Component {
  render() {
    React.createElement('div', {},
    React.createElement('p', {},"Two grannies having the time of their life!"),
    React.createElement('p', {}, "Passengers:"),
    React.createElement('ul', {},
    [
      React.createElement('li', "Anges"),
      React.createElement('li', {}, "miruel")


    ]));


    return (<div class="oldercoaster"></div>
    );
  };
};
export class InFrontOfYou extends React.Component{
  render() {
    React.createElement('div',{},
  React.createElement('p', {},'You shouldnt look too far'), 
React.createElement('p', {}, 'Sometimes, the soultion is right in from of you'),
);

return (<div></div>);
  };
};

export class ButcherShop extends React.component{
  render() {
    React.createElement('div', {},
  React.createElement('p', {}, 'Hello! We have the following products for sale today'),
React.createElement('ul', {}, 
[
 React.createElement('li', {}, 'Tenderloin'),
 React.createElement('li', {}, 'Short ribs'),
 React.createElement('li', {}, 'Beef shin'),
 React.createElement('li', {}, 'Ribeye') 
]));
return (<div class="butcher-shop"></div>)
  }
}


  ReactDOM.render(
    React.createElement('div', {}, [
      React.createElement(OlderCoaster),
      React.createElement(InFrontOfYou),
      React.createElement(ButcherShop)
    ]),
    document.getElementById('global')
  );

Answer 1

你那里有一个简单的书写错误，应该是

导出类 ButcherShop 扩展了 React.Component {

注意大写的 C