How to solve the "superfluous" of React project?

case:
when I need to render the corresponding component according to certain conditions, if I exceed the number of ternary operators, I usually choose to use & & , but if there are too many, I don"t think it is beautiful enough. Excuse me, is there any good way to solve it?

obj.type === "name1" && (<span>Alan</span>);
obj.type === "name2" && (<span>Hacken</span>);
obj.type === "name3" && (<span>xxx</span>);
...
Es6
May.23,2022

define an object, which should be accessed in square brackets:

 

write a configuration file, export the object, and then take it according to the key value of the object, such as Obj [obj.type]

.

you can maintain the configuration in peacetime

Menu