在Codepen中使用React但什么也没得到

问题描述

我是React和Codepen的新手，但是刚刚开始尝试它。从某种程度上讲，我从其他地方复制的示例应该可以正常工作，但在Codepen中却没有任何帮助。以为我肯定设置有误，我最终在Codepen上分叉了别人的代码，然后在那儿尝试了我的代码，但这仍然行不通。

以下是我正在尝试的示例：https://codepen.io/hensy8586/pen/MWyoGLR。这是一个简单的代码，应该返回三个可单击的按钮，但是我在输出窗口中没有看到任何空白，而且没有收到任何错误消息。

我遇到了其他一些使我感到困惑的错误消息：

我还（有时）看到一条错误消息，说我应该导入React和ReactDOM，但是我看到很多其他代码都可以在没有该代码的情况下工作。
我还遇到了错误Uncaught ReferenceError: require is not defined，该错误在添加require.js脚本后消失了。但是我注意到Codepen中的许多其他代码都可以运行，而无需添加require.js。

如果有人可以帮助我更好地理解这些内容，我将不胜感激。谢谢。

解决方法

更改此内容

function Clicker({ handleClick }) {
  return <div>
    <button onClick={(e) => {handleClick('A');}}>A</button>
    <button onClick={(e) => {handleClick('B');}}>B</button>
    <button onClick={(e) => {handleClick('C');}}>C</button>
  </div>;
}

ReactDOM.render(<Clicker handleClick={(letter) => 
    {console.log(`${letter} clicked`);}} />,document.getElementById('root');

对此：

function Clicker({ handleClick }) {
  return <div>
    <button onClick={(e) => {handleClick('A');}}>A</button>
    <button onClick={(e) => {handleClick('B');}}>B</button>
    <button onClick={(e) => {handleClick('C');}}>C</button>
  </div>;
}

ReactDOM.render(
  <Clicker handleClick={(letter) => 
    {console.log(`${letter} clicked`);}} />,document.getElementById('root')
); //<-- Oops!

罪魁祸首：结尾缺少);。

Working Codepen

我建议您遵循此guide来设置可正常运行的React网页或使用create-react-app。

这两种方式都将帮助您更好地调试错误，并在没有其他框架，库或代码运行的环境中工作，例如Codepen。对于没有经验的React用户，这是IMHO的首选方式。

此外，更喜欢库的development版本而不是production版本。仅当您的应用程序经过测试并可以部署时，才切换到production版本。

codepen javascript reactjs reactjs