React JSX按钮组件异常求助：无法生成橙色按钮及指定文本

你的代码主要存在两个核心问题：

• 递归引用错误：定义const Button时，在JSX中使用了<Button>标签，但此时变量还未完成定义，且这里应使用原生<button>（小写）标签——大写<Button>会被React识别为自定义组件，但你并未定义对应组件。
• 按钮文本不符合预期：原按钮文本为“Click me”，需要改为你想要的“HELLO I'm title”。

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    // 若不需要标题可直接删除，按需调整
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
      </h3>
    );
    const Button = (
      <button
        style={{
          backgroundColor: "tomato",
          padding: "8px 16px",
          border: "none",
          borderRadius: "4px",
          color: "#fff",
          fontSize: "16px",
          cursor: "pointer"
        }}
        onClick={() => console.log("I'm clicked")}
      >
        HELLO I'm title
      </button>
    );
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

关键修改说明 #

1. 替换<Button>为<button>：使用原生HTML按钮标签，解决递归引用问题。
2. 修改按钮文本为HELLO I'm title：匹配预期显示内容。
3. 补充基础样式：添加内边距、圆角、文字颜色等，让按钮视觉效果更贴近参考需求，可根据喜好调整。

内容的提问来源于stack exchange，提问作者신민준