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

Question

我是 React 和 Codepen 的新手，但刚刚开始尝试。不知何故，我从其他地方复制的我知道应该起作用的示例在 Codepen 中没有给我任何东西。我想我一定是设置错了，我最终在 Codepen 上分叉了其他人的代码并在那里尝试了我的代码，但它仍然不起作用。

这是我正在尝试的示例：https://codepen.io/hensy8586/pen/MWyoGLR。这是一个简单的代码，应该 return 三个可点击的按钮，但我在输出 window 中除了空白之外什么也看不到，而且我没有收到任何错误消息。

我遇到的其他一些错误消息让我很困惑：

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

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

Answer 1

改变这个：

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 to set up a working React web page or use create-react-app。

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

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

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

Using React in Codepen but not getting anything

javascript

reactjs

codepen