gpt4 book ai didi

reactjs - 如何创建绑定(bind)故事书控件参数的通用 typescript 函数

转载 作者:行者123 更新时间:2023-12-05 02:05:18 25 4
gpt4 key购买 nike

如何编写泛型,以便 Result 接受提供给泛型的另一种类型的参数?

这是我的示例代码。

import { Story } from '@storybook/react/types-6-0';

type TKeyAny = {
[key: string]: string; // | 'other args values here...';
};

// this fails
export const bindargs = <A extends TKeyAny, T extends Story<A>>(args: A, Template: T): T => {
const Comp = Template.bind({});
Comp.args = args;
return Comp;
};

export default bindargs;

这会起作用,但它并不特定于传递给它的参数,这就是为什么我想要一个通用的:


// This works but I'd like this instead to be in a generic
// export const bindargs = (args: TKeyAny, Template: Story<TKeyAny>): Story<TKeyAny> => {
// const Comp = Template.bind({});
// Comp.args = args;
// return Comp;
// };

最佳答案

我们在 Storybook 中使用这样的泛型:

也许你可以做类似的事情

import React from 'react'
import { Meta, Story } from '@storybook/react/types-6-0'

import SelectDropdown, { ISelectDropdownProps, SelectOption } from './SelectDropdown'

export default {
title: 'Shared/Components/SelectDropdown',
component: SelectDropdown,
argTypes: {
options: {
control: {
type: 'object',
},
},
(...)
} as Meta


const Template = <T extends {}>(): Story<ISelectDropdownProps<T>> => args => (
<div
style={{
width: '300px',
}}
>
<SelectDropdown<T> {...args} />
</div>
)

export const Normal = Template<number>().bind({})
Normal.args = {
options: createOptions(5),
}

关于reactjs - 如何创建绑定(bind)故事书控件参数的通用 typescript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63659736/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com