如何在JSFiddle中同时使用TypeScript与React？

1. 正确配置JSFiddle面板 #

• 顶部语言选择器设为 TypeScript
• 框架/扩展下拉框选择 React（建议选18.x版本）
• 两个选项必须同时开启，单独选其中一个都会导致功能缺失

2. 调整代码以适配TS+React规范 #

TypeScript下写React需要注意JSX编译和类型定义：

• 定义组件时使用React的类型声明，比如用React.FC或者显式定义props接口：

interface ButtonProps {
  label: string;
  onClick: () => void;
}

// 用React.FC约束组件props
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

• 渲染逻辑要对应React版本，React 18+使用createRoot：

// 确保页面存在id为root的容器
const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <div>
      <Button label="按钮1" onClick={() => alert('按钮1被点击')} />
      <Button label="按钮2" onClick={() => alert('按钮2被点击')} />
      <Button label="按钮3" onClick={() => alert('按钮3被点击')} />
    </div>
  );
}

3. 检查TS编译配置 #

• 点击顶部的Settings按钮，切换到TypeScript标签
• 确保jsx选项设置为react-jsx（React 18推荐）或react，这样JSX语法会被正确编译为React调用

常见问题排查 #

• 如果页面仍无内容，检查控制台是否有TS编译错误（比如类型不匹配、未定义的变量）
• 确认页面的HTML面板中存在id="root"的容器元素，否则React无法挂载组件

内容的提问来源于stack exchange，提问作者Raj