javascript - 在 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 的情况下运行良好。

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

标签： javascriptreactjscodepen

改变这个：

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!

罪魁祸首：最后不见了);。

工作密码笔

我建议你按照本指南设置一个工作的 React 网页或使用create-react-app。

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

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

javascript - 在 Codepen 中使用 React 但没有得到任何东西

问题描述

解决方案

推荐阅读