如何使这个组件在 React 中循环（通过计算它接收的 props 并进行一些计算并具有静态标题）

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}
        />
      </>
    );
  });
};