如何使用打字稿在reactjs中传递数据

Posted 2023-02-21

【中文标题】如何使用打字稿在reactjs中传递数据

【英文标题】：How to pass data in reactjs using typescript

【发布时间】：2019-12-12 09:43:43

【问题描述】：

如何使用 tsx 将对象传递给 reactjs 中的子组件。当我尝试这种方式时，我收到了这个错误。我可以在哪里声明类型？ Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard>

Cards.tsx

  render() 
    return (
      <div>
        this.state.card.map((card: any) => (
          <ShipmentCard key=card.id value=card/>
        ))
      </div>
    );
  

完整的错误信息是：

键入'键：任意；数据：任何； ' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly'。属性“数据” 'IntrinsicAttributes & 类型不存在 IntrinsicClassAttributes & Readonly & Readonly'

【问题讨论】：

完整错误信息Type ' key: any; data: any; ' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<> & Readonly< children?: ReactNode; >'. Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<> & Readonly< children?: ReactNode; >'

【参考方案1】：

如果您使用的是 typescript，那么您必须在 ShipmentCard.tsx 中声明所有道具

interface ShipmentCardProps 
    key: string;
    value: 


interface ShipmentCardState 

class ShipmentCard extends React.Component<ShipmentCardProps, ShipmentCardState> 

export default ShipmentCard

【讨论】：

@SKL 能帮上忙真是太好了

【参考方案2】：

试试this。你在你的州有“卡”吗？好像没有。您需要从父组件获取道具。您需要尝试使用道具传递数据。所以阅读链接。并尝试使用 redux。

【讨论】：

是的，我做到了。当render() 中的console.log this.props 显示空对象。 tsx 检查类型这就是抛出此错误的原因

对象为空两次？在安装过程中，它可能是空的。更新后发生了什么（第二次渲染）

如果你在value 属性中传递一个对象，它会抛出一个错误但值仍然显示控制台日志。错误Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ShipmentCard> & Readonly<> & Readonly< children?: ReactNode; >'如果我们修复类型将修复此问题

***.com/questions/48240449/… 我找到了这个答案。它说：“使用 typescript 时必须提供 propTypes 和 stateType。”