Reactjs 在codepen中分解组件

我正在用代码笔测试这段代码

class App extends React.Component {
  render() {
    const greeting = 'Welcome to React';

    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}

const Greeting = ({ greeting }) => <h1>{greeting}</h1>;

React.render(<App />, document.getElementById("root"));

类应用程序扩展了React.Component{
render（）{
常量问候语=‘欢迎反应’；
返回(
);
}
}
常量问候语=（{Greeting}）=>{Greeting}；
React.render（，document.getElementById（“根”））；

---

它不会渲染，但如果我将其作为类编写，有人知道如何修复它吗？

文件中有导入吗

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

class App extends React.Component {
  render() {
    const greeting = 'Welcome to React';

    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}

const Greeting = ({ greeting }) => <h1>{greeting}</h1>;

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
render（）{
常量问候语=‘欢迎反应’；
返回(
);
}
}
常量问候语=（{Greeting}）=>{Greeting}；
render（
我已经签入了codesandbox.io（在那里更容易选择所需的依赖项）这里一切都很好。因此，如果您看到任何错误消息，请提供错误消息，或者向您的codepenNo添加链接。如果错误消息不起作用，我将尝试codesandbox，并将其保持打开状态，以防其他人有答案，谢谢。我使用导入语句尝试了此操作，并更改了reactdom.render，但它不起作用