Reactjs react组件的多个实例：access prop

我希望有两个组件，它们具有不同的文本，可以向操作传递不同的参数，但我希望重用它们

我有母类“保险”，相关部分（imo）如下

render（）{
返回(
)
}

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

//insuranceTypeCard.tsx
render（）{
返回(
{this.props.type}
{this.props.type}；

你能试试这个吗

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>
  );
}

---

看看这是否有帮助。

你能在

React

中返回同级组件吗？我很惊讶它没有抛出错误，但可能相关。谢谢你的建议。但似乎没有改变任何东西。奇怪的是，第一个{this.props.type}返回正确的不同类型，但在对话框中它不再工作。现在，我通过将当前打开的对话框的名称存储在redux存储中，然后将StateToprops映射到一个新的道具来解决它。@solaire这太奇怪了。您可以使用React devtools扩展来检查将哪些道具传递到React组件中在Chrome/Firefox中提供；看看这是否有帮助，也许？

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

// the rest is the same