您的功能请求是否与问题相关?请描述
数组属性应该通过 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",
2条答案
按热度按时间yiytaume1#
+1
此功能请求的更新情况如何?
z9gpfhce2#
同意,这确实需要一些改进。对于不了解编程的用户来说,使用这个控件相当困惑。