javascript - 如何使用具有不同变量名称的数据？

Question

我有一个组件，它应该从 api 获取并使用不同的变量名称呈现数据。
我有两个具有相同数据但具有不同变量名称的响应，例如:

FirstReq {
    id          number
    published   boolean
    publishDate string
    newsImage   string
    newsText    string
    newsTitle   string
}

SecondReq {
    anons        string
    archived     boolean
    fullText     string
    id           number
    postingDate  string
    title        string
}

通常我通过变量名使用它:

interface ItemProps {
  item: {
    id: number,
    title: string,
    fullText: string,
    anons: string,
    postingDate?: string,
    image?: string,
  },
}

const Item: React.FC<ItemProps> = (props) => {
  const { item } = props;
  const { id, postingDate, title, anons, image, fullText } = item;

  return (
    <>
      <div>{title}</div>
      <div>{postingDate}</div>
      <div>{fullText}</div>
    </>
  )
}

export default Item

但是如何编写组件以将其与不同的变量名称一起使用？ “text”的变量可以是“fullText”或“newsText”或“articleText” 是否可以在一个通用组件中呈现它？不知道怎么写。任何人都可以提供帮助或建议如何去做吗？

Answer 1

IMO 最好的解决方案始终是统一从不同 API 接收到的数据，如果由于任何原因这不可能并且应该从您这边处理，则有不同的方法来处理这个问题，我的建议是一种有效的方法是拥有一个独特的接口(interface)，并映射您的数据以创建与该接口(interface)匹配的模型
前任:

interface ItemInterface {
  id: number,
  title: string,
  postingDate?: string,
  ...
}

你会得到不同的回应，一个是 postingDate另一个名称不同 publishDate ，因此您可以执行以下操作:

class Item implements ItemInterface {
  constructor(itemData) {}
 
  get postingDate() {
    return itemData.postingDate || itemData.publishDate;
  }
  ...
  ...
}

然后在您的组件中，您可以执行以下操作:

const { id, postingDate, title, anons, image, fullText } = new Item(item);

实际上，您可以通过创建一个以类似方式获取值的新简单对象来实现相同的目的:

const unifiedItem: ItemInterface = {
  postingDate: itemData.postingDate || itemData.publishDate
  ...
}

还有一些建议:

元素本身有单独的界面，那么如果你想要 Prop 界面也可以，例如:

interface ItemPropsInterface {
  item: ItemInterface
}

此外，一些重命名可用于区分事物(许多事物称为项目...)

如果你想从 Prop 中获得元素，你可以拥有 const Item: React.FC<ItemProps> = ({item}) => {