Reactjs ExpansionPanel中的自定义组件无法呈现

为什么下面的代码不呈现集群

如果我直接使用ExpansionPanelSummary（如代码注释中所示），那么集群将正确呈现

function ClusterSummary(props) {
  return (
    <ExpansionPanelSummary>
      <Typography>{props.cluster.title}</Typography>
    </ExpansionPanelSummary>
  );
}

function Clusters(props) {
  return (
    <div>
      {props.clusters.map((cluster) => 
        <ExpansionPanel key={cluster.id} cluster={cluster}>
          {/* <ExpansionPanelSummary>
            <Typography>{cluster.title}</Typography>
          </ExpansionPanelSummary> */}
          <ClusterSummary key={cluster.id} cluster={cluster} />
        </ExpansionPanel>
      )}
    </div>
  );
}

功能集群摘要（道具）{
返回(
{props.cluster.title}
);
}
功能集群（道具）{
返回(
{props.clusters.map（（cluster）=>
{/* 
{cluster.title}
*/}
)}
);
}

codestandbox上的交互式链接：

---

我正在使用material ui/core 3.9.3

此问题的原因和解决方案与我在此处回答的问题相同：

您需要以下内容来修复它：

function ClusterSummary(props) {
  return (
    <ExpansionPanelSummary>
      <Typography>{props.cluster.title}</Typography>
    </ExpansionPanelSummary>
  );
}
// This is what needs to be added
ClusterSummary.muiName = "ExpansionPanelSummary";

功能集群摘要（道具）{
返回(
{props.cluster.title}
);
}
//这是需要补充的
ClusterSummary.muiName=“ExpansionPanelSummary”；

关于为什么需要这样做的详细信息，请参见我之前的答案