Question

我想拥有两个具有不同文本并且可以将不同参数传递给动作的组件，但是我想重用它们。

我有父类“ insurances”，相关部分（imo）是这个。

render() {
  return (
    <InsuranceTypeCard
      type="HOUSEHOLD_GOODS"
      header="myThings"
    />
    <InsuranceTypeCard
      type="PRIVATE_LIABILITY"
      header="myDamages"
    />
  )
}

现在在InsuranceTypeCard中，我使用像这样的道具，它可以按预期方式两次不同地渲染类型，但是在“对话框”（从material-ui弹出）中，它将仅第二次渲染第二种类型，因此看起来因为它们以某种方式共享相同的道具，第二个组件覆盖了第一个实例。

//insuranceTypeCard.tsx
render() {
  return (
    <div>
      {this.props.type}
    </div>
    <Dialog>
      {this.props.type};
    </Dialog>

Answer 1

你可以试试吗？

import React, { Fragment } from 'react';

// further down in your code...
render() {
  return (
    <Fragment>
      <InsuranceTypeCard
        type="HOUSEHOLD_GOODS"
        header="myThings"
      />
      <InsuranceTypeCard
        type="PRIVATE_LIABILITY"
        header="myDamages"
      />
    </Fragment>
  );
}

在尝试并排渲染组件时，可以使用<Fragment>组件。但是，它仅是在React 16.2中添加的，因此，如果您运行的是先前版本，则可以像这样填充功能：

const Fragment = ({ children }) => children;

// the rest is the same

看看是否有帮助。

react组件的多个实例：访问道具

1 个答案: