我可以根据现有故事制作一个包含物体道具的新故事吗？

Question

我一直在摆弄故事书，发现了这个新的很酷的功能，可以在摆弄当前的故事时添加新故事：交互式故事生成

我尝试用这个故事来做到这一点

export const ShareButton: Story = {
  args: {
    width: "34px",
    height: "34px",
    padding: "5px",
    borderRadius: "circle",
    background: colors.primary.white,
    color: colors.primary.blue,
    boxShadow: colors.shadows.section,
    marginRight: "0px",
    onClick: fn(),
    children: <Icon component={Share} />,
  },
}

但是，当我更改 Storybook UI 中的颜色并按下按钮以基于此更改创建新故事时，我收到此错误：

Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.     at mapIntoArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46463:13)     at mapChildren (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46490:3)     at Object.toArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46540:10)     at parseReactElement2 (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3910:3822)     at reactElementToJsxString (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3920:3471)     at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3921:12924     at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46491:17     at mapIntoArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46382:23)     at Object.mapChildren [as map] (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46490:3)     at renderJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3921:12757)

我发现错误在于 Children 道具，因为它的结构就是错误中提到的结构：

children : {
type : {...} 2 keys
key : null
ref : null
props : {...} 1 key
_owner : null
_store : {...} 0 keys
}

有没有办法让它与对象一起工作？我可以使用任何类型的 JSON 转换并从组件本身传递它吗？对此的任何输入都受到高度赞赏，但在网络上找不到任何内容

Answer 1

您可以为子级使用 ArgType 映射，以便将字符串写入故事参数，并且（不支持的）JSX 在元中定义（并且不受故事生成影响）

https://storybook.js.org/docs/api/arg-types#mapping