时间戳

首页 > 解决方案 > 在 codepen 中解构组件

reactjs - 在 codepen 中解构组件

问题描述

我只是在 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"));

它不会呈现，但如果我将它写成一个类，它会呈现，有人知道如何修复它吗？

标签： reactjsdestructuringcodepen

解决方案

您的文件中有导入吗？

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"));

看起来你在最后一行输入了。应该ReactDom

这里是codesandbox的链接：https ://codesandbox.io/s/5yl153nyxk

推荐阅读