如何在MDX文件中为Storybook故事添加回调函数处理事件

MDX v1（Storybook 6及更早版本默认依赖的版本）解析器存在语法限制：无法正确识别JSX属性内直接编写的、带多行大括号函数体的箭头函数，会将回调内部的{误判为MDX表达式的边界，进而抛出语法错误。

方案1（兼容性最好，无需改配置） #

将回调逻辑从JSX属性中抽离，单独定义为外部函数，再传入组件属性，修改后的代码如下：

<Meta title="Components/Droplines" component={Droplines} />

// 单独定义回调逻辑
const handleStoreCreated = (store) => {
  store.dispatch({
    type: "EVENT.ADD_DROPLINE",
    payload: {
      isHorizontal: true,
      color: "steelblue",
      x1: 150,
      x2: 0,
      y1: 150,
      y2: 150,
    }
  });

  store.dispatch({
    type: "EVENT.ADD_DROPLINE",
    payload: {
      isVertical: true,
      color: "steelblue",
      x1: 150,
      x2: 150,
      y1: 150,
      y2: 0,
    }
  });
}

export const DroplinesTemplate = (args) => (
  <Chart onStoreCreated={handleStoreCreated}>
    <Droplines />
  </Chart>
);

方案2（适配高版本Storybook） #

如果你使用的是Storybook 7及以上版本，默认已升级为MDX v2，该版本已修复上述解析限制，无需修改代码即可直接运行，只需确认项目依赖的@mdx-js/loader版本为2.x即可。

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