storybook 实现数组的控制

sr4lhrrt  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(46)

您的功能请求是否与问题相关?请描述

数组属性应该通过 Object 控件在 storybook 中进行更改。如果没有实施其他(仅 storybook)检查,这可能会破坏代码。
示例(未经测试):

type ArrayMapperProps = {
    array?: string[];
};

const ArrayMapper: React.FC<ArrayMapperProps> = (props) => {
    return (<>{props.array && props.array.map(el => (<span key={el}>{el}</span>))}</>);
};

当首次在控件中设置属性 array 时,它会自动设置为一个对象( {} ),从而破坏上面的代码。必须添加一个检查,以确定该属性是否确实为数组。仅为了防止 storybook 使组件崩溃而进行的更改:

...
   return (<>{props.array && Array.isArray(props.array) && props.array.map(el => (<span key={el}>{el}</span>))}</>);
   ...

此外,object 控件对数组的处理效果不佳。然而,根据 https://storybook.js.org/docs/react/essentials/controls#annotation,对于数组没有选项。

描述您希望实现的解决方案

拥有一个基于属性类型的自动设置的数组控件将非常有帮助,也感觉很自然。

您是否能够协助将此功能变为现实?

我尚未进一步研究实现方法。
storybook 设置

"@storybook/addon-actions": "^6.4.18",
"@storybook/addon-essentials": "^6.4.18",
"@storybook/addon-links": "^6.4.18",
"@storybook/builder-webpack5": "^6.4.18",
"@storybook/manager-webpack5": "^6.4.18",
"@storybook/react": "^6.4.18",
yiytaume

yiytaume1#

+1
此功能请求的更新情况如何?

z9gpfhce

z9gpfhce2#

同意,这确实需要一些改进。对于不了解编程的用户来说,使用这个控件相当困惑。

相关问题