如何在反应中将值从组件从 A 传递到 B 组件？

如何解决如何在反应中将值从组件从 A 传递到 B 组件？

父组件

export interface IInvoiceDetailProps extends StateProps,dispatchProps,RouteComponentProps<{ id: string }> { }

export const InvoiceDetail = (props: IInvoiceDetailProps) => {
  useEffect(() => {
    props.getEntity(props.match.params.id);
  },[]);

  const { invoiceEntity } = props
  
  return (
    <Row>
      <**InvoiceItem** {...props} />
    </Row>
   );
} 

const mapStatetoProps = ({ invoice }: IRootState) => ({
  invoiceEntity: invoice.entity,});

const mapdispatchToProps = { getEntity };

type StateProps = ReturnType<typeof mapStatetoProps>;
type dispatchProps = typeof mapdispatchToProps;

export default connect(mapStatetoProps,mapdispatchToProps)(InvoiceDetail);

子组件

export interface IInvoiceItemProps extends StateProps,RouteComponentProps<{ url: string }> {}

export const InvoiceItem = (props: IInvoiceItemProps) => {
  const { invoiceItemList,match,loading } = props;
  return (
    <div>
      <h2 id="invoice-item-heading">
        Invoice Items
      </h2>
    </div>
   ) 

}

const mapStatetoProps = ({ invoiceItem }: IRootState) => ({
  invoiceItemList: invoiceItem.entities,loading: invoiceItem.loading,totalItems: invoiceItem.totalItems,links: invoiceItem.links,entity: invoiceItem.entity,updateSuccess: invoiceItem.updateSuccess,});

const mapdispatchToProps = {
  getEntities,reset,};

type StateProps = ReturnType<typeof mapStatetoProps>;
type dispatchProps = typeof mapdispatchToProps;

export default connect(mapStatetoProps,mapdispatchToProps)(InvoiceItem);

在这里，我想将一些数据从 InvoiceDetails 传递到 InvoiceItems。 我如何传递它并在 InvoiceDetails 中访问它？

例如，我想在 IvoiceItems 中传递 InvoiceDetails ID（主键）以相应地获取数据。

解决方法

在 React 中将数据从子级传递给父级很简单。在您的父组件中创建一个状态变量：

const [data,setData] = useState({});

然后，在您的 JSX 中，传递 setData 函数：

<InvoiceDetails {...props} setData = {setData} />

然后在您的 InvoiceDetails 组件中，您可以调用 setData 并将其设置为您想要的任何值，这也将更新父级中的状态变量。