React Storybook组件属性默认值不正确 与React项目表现不一致

问题原因 #

该问题是Storybook内置的组件属性自动解析工具react-docgen的已知表现：它在解析组件参数解构的默认值时，不会实际执行函数表达式，会直接将函数调用的代码片段作为字符串赋值给对应属性。你代码中写的Object.keys(objs)会被解析为字符串"Object.keys(objs)"，因此出现类型异常。普通React项目运行时会实际执行代码逻辑，所以表现正常。

可行解决方案 #

方案1：调整默认值写法，在组件内部做兜底 #

将属性默认值的逻辑从参数解构中移到组件内部实现，避开Storybook的解析逻辑：

import React from "react";

const objs = { a: "a", b: "b" };

export const Button = ({ testProp, text }) => {
  // 内部兜底默认值
  const finalTestProp = testProp ?? Object.keys(objs);
  console.log(finalTestProp); // 输出为数组，逻辑正常
  return <button>{text}</button>;
};

方案2：在Story配置中显式指定属性默认值 #

在对应组件的Story配置里手动给testProp赋值，覆盖Storybook的自动解析结果，以Button.stories.js为例：

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Default = {
  args: {
    text: '测试按钮',
    // 显式指定testProp的默认值
    testProp: ['a', 'b']
  }
};

方案3：切换属性解析器（TypeScript项目适用） #

如果你的项目使用TypeScript开发，可以将Storybook的docgen解析器切换为react-docgen-typescript，该解析器对复杂默认值的解析准确率更高，修改.storybook/main.js配置即可：

// .storybook/main.js
module.exports = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          parser: 'typescript',
          docgen: 'react-docgen-typescript'
        }
      }
    }
  ]
}

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