如何使这个组件在React中循环(通过计算它接收道具、进行一些计算并具有静态标题的脂肪)

Question

我有以下3个列表项。它们中的每一个都使用相同的组件但不同的计算：

<ListItem title={'Product 1'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price2)}
isMore={props.data.price1 >= props.data.price2}
handleClick={open}
/>
<Underline />
<ListItem title={'Product 2'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price3)}
isMore={props.data.price1 >= props.data.price3}
handleClick={open}
/>
<Underline/>
<ListItem title={'Product 3'} tag={tag} calculatedVal={getCalculatedVal(props.data.price1, props.data.price4)}
isMore={props.data.price1 >= props.data.price4}
handleClick={open}
/>

如何通过循环将其转换为1个组件？

Answer 1

从代码中不清楚tag、getCalculatedValue、color等是在哪里声明的。

但这里有一个基本方法。将列表项道具移动到数组中，并使用贴图渲染每个列表项。

import ListItem from "./somewhere/ListItem";
import Underline from "./somewhere/Underline";
import { getCalculatedVal } from "./somewhere/getCalculatedVal";
const PRICES = ["price2", "price3", "price4"];
export const MyComponent = ({ data, ...props }) => {
const listItems = PRICES.map((price) => {
return {
calculatedVal: getCalculatedVal(data.price1, data[price]),
isMore: data.price1 >= data[price],
key: price,
};
});
return listItems.map((listItemProps) => {
return (
<>
<Underline color={props.color} />
<ListItem
title={"Product 1"}
tag={props.tag}
handleClick={props.open}
{...listItemProps}
/>
</>
);
});
};