React中如何将InvoiceDetail组件的数据传递给InvoiceItem组件

开发者阿泽

2026-10-10

React + TypeScript + Redux 父子组件传值实现方案

步骤1：修改父组件，传递目标参数

在父组件InvoiceDetail渲染子组件时，在原有属性透传的基础上，额外追加需要传递的参数，比如路由id、invoiceEntity实体数据：

// 父组件修改后的return部分
return (
  <Row>
    {/* 新增invoiceId、invoiceInfo两个自定义参数传递 */}
    <InvoiceItem 
      {...props} 
      invoiceId={props.match.params.id} 
      invoiceInfo={invoiceEntity} 
    />
  </Row>
);

步骤2：修改子组件Props接口，声明接收参数的类型

在子组件的IInvoiceItemProps接口中，新增父组件传递的参数对应的类型定义，避免TS类型报错：

// 这里的InvoiceEntityType替换为你项目中invoiceEntity的实际TS类型即可
export interface IInvoiceItemProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> {
  invoiceId: string;
  invoiceInfo: InvoiceEntityType;
}

步骤3：子组件中访问并使用传入的参数

可以直接从props中解构出目标参数使用，比如用传入的id拉取对应子项数据：

export const InvoiceItem = (props: IInvoiceItemProps) => {
  // 解构出父组件传入的参数
  const { invoiceItemList, match, loading, invoiceId, getEntities } = props;

  // 组件挂载后用传入的id拉取对应发票子项数据
  useEffect(() => {
    if (invoiceId) {
      getEntities(invoiceId);
    }
  }, [invoiceId, getEntities]);

  return (
    <div>
      <h2 id="invoice-item-heading">
        Invoice Items (当前发票ID: {invoiceId})
      </h2>
    </div>
  ) 
}