React项目中如何通过Storybook iframe加载外部故事并传入真实数据？

错误根源 #

你的iframe地址拼接有误：URL中第一个?用于分隔路径与查询参数，后续的参数必须用&连接，而你用了第二个?，导致Storybook把?dataurl=xxx识别成了故事ID的一部分，因此找不到匹配的故事。

修正后的iframe代码 #

将最后一个?替换为&即可：

<iframe
  src={`http://localhost:6006/?path=/story/widgets-teaser-1big-small-grid--widget-teaser-1-big-small-grid-component&full=1&shortcuts=false&singleStory=true&dataurl=${exampleApi}`}
  width="800"
  height="700"
></iframe>

目标故事中获取参数并请求真实数据 #

在被嵌入的Storybook故事中，按以下步骤替换假数据：

1. 提取URL参数
   用URLSearchParams获取传入的dataurl：

const dataUrl = new URLSearchParams(window.location.search).get('dataurl');

2. 用axios请求真实数据
   结合React Hooks替换原有假数据，示例代码如下：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import YourComponent from './YourComponent';

export default {
  title: 'Widgets/Teaser1BigSmallGrid',
  component: YourComponent,
};

const Template = (args) => {
  const [realData, setRealData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const dataUrl = new URLSearchParams(window.location.search).get('dataurl');
      // 无参数时用假数据兜底
      if (!dataUrl) {
        setRealData(args.defaultData);
        setLoading(false);
        return;
      }
      try {
        const response = await axios.get(dataUrl);
        setRealData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return <YourComponent {...args} data={realData} />;
};

export const WidgetTeaser1BigSmallGridComponent = Template.bind({});
WidgetTeaser1BigSmallGridComponent.args = {
  defaultData: {/* 原有假数据结构 */},
};

额外注意事项 #

• 确保目标API支持CORS，否则浏览器会拦截跨域请求；若无法修改API配置，可在Storybook的main.js中配置代理转发请求。
• 可对dataurl参数添加格式校验，避免传入无效地址导致请求失败。

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