映射三种不同类型的组件存储在一个主要的状态数组?

Question

我在我的redux状态模块中有以下代码:这段代码是一个对象，它有一个数组，里面有3个不同的组件:

export interface TypeA {
id: string; 
type : 'a'
valueX : 'x'
}
export interface TypeB {
id: string; 
type : 'b'
valueY : 'y'
}
export interface TypeC {
id: string; 
type : 'c'
valueZ : 'z'
}
export interface MajorArr {
types: {
[key: string]: (TypeA | TypeB | TypeC)[];
};
}

下面是我的映射派系，我访问这个数组，我想映射这3个不同的组件，这取决于当前映射迭代的项目类型。当前的问题是el on map给出了3个项目数组，但不知道哪一个是被映射的，每次道具都不同。

const typesItems = types[id].map((el) => {
return (
<TypeA id={el.id} valueY={el.valueY} />
<TypeB id={el.id} valueX={el.valueX} />
<TypeC id={el.id} valueZ={el.valueZ} />
);
}
});

Answer 1

您可以使用switch-case来检查type，从而呈现正确的组件并给予正确的道具。

类似

const typesItems = types[id].map((el) => {
switch(el.type) {
case 'a':
return <TypeA id={el.id} valueX={el.valueX} />
case 'b':
return <TypeB id={el.id} valueY={el.valueY} />
case 'c':
return <TypeC id={el.id} valueZ={el.valueZ} />
default: // Optionally handle unknown type
return <></>;
}
});