react组件的多个实例：access prop

Question

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

我有父类“保险”，相关部分（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 中添加的，所以如果你运行的是以前的版本，你可以像这样 polyfill 功能：

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

// the rest is the same

看看有没有帮助。