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

Question

父组件

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, DispatchProps, 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（主键）以相应地获取数据。

Answer 1

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

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

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

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

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