MDX文件中嵌入JavaScript代码的可行方法咨询

MDX本质是JSX与Markdown的结合，遵循React组件逻辑，不能用传统HTML的onclick字符串绑定方式，以下是几种可行方案：

1. MDX文件内直接定义函数并绑定 #

在MDX里可直接编写JS代码块定义函数，通过React的onClick（驼峰命名）绑定到元素：

import { Preview } from './你的Preview组件路径'

{/* 直接在MDX中定义处理函数 */}
const onClickHandler = () => {
  alert('按钮被点击了！')
}

<Preview>
  <div>
    <button onClick={onClickHandler}>Click</button>
  </div>
</Preview>

2. 导入外部交互组件（推荐复杂逻辑场景） #

把带交互的部分封装成独立React组件，再导入MDX使用：
比如创建InteractiveButton.jsx：

export default function InteractiveButton() {
  const handleClick = () => {
    console.log('点击事件触发')
    // 可编写更复杂逻辑
  }

  return <button onClick={handleClick}>Click</button>
}

在MDX中导入调用：

import { Preview } from './你的Preview组件路径'
import InteractiveButton from './InteractiveButton'

<Preview>
  <div>
    <InteractiveButton />
  </div>
</Preview>

3. 内联箭头函数（适合极简逻辑） #

逻辑非常简单时，可直接用内联箭头函数：

import { Preview } from './你的Preview组件路径'

<Preview>
  <div>
    <button onClick={() => alert('内联点击触发')}>Click</button>
  </div>
</Preview>

关键注意点 #

• MDX中JSX属性遵循React命名规范，用onClick而非onclick
• 不能像传统HTML那样用字符串形式绑定事件（如onclick="onClickHandler"），必须绑定函数引用
• 若你的Preview组件仅用于展示代码而非渲染交互元素，需确保它支持解析并执行内部JSX逻辑

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