Javascript 如何在具有命名导出的文件中使用React.memo（）？

我习惯于导出默认的React.memo（SomeComponent）以便React可以记忆我的组件

但在我使用命名导出的文件中。如何使用

React.memo（）

上面这条线不行

示例文件

function MainPostTopic(props) {
  console.log('Rendering MainPostTopic...');
  return(
    <LS.Topic_H2 id={props.id}>
      {props.value}
    </LS.Topic_H2>
  );
}

function MainPostSubtopic(props) {
  console.log('Rendering MainPostSubtopic...');
  return(
    <LS.Subtopic_H3>
      {props.value}
    </LS.Subtopic_H3>
  );
}

export {MainPostTopic, MainPostSubtopic};

函数MainPostTopic（道具）{
log（'Rendering MainPostTopic…'）；
返回(
{props.value}
);
}
功能MainPostSubtopic（道具）{
log（'Rendering MainPostSubtopic…'）；
返回(
{props.value}
);
}
导出{MainPostTopic，MainPostSubtopic}；

需要命名不是默认值的导出

const MemoizedMainPostTopic = React.memo(MainPostTopic)
export {MemoizedMainPostTopic};

试一试

或

---

您只需要为要导出的对象属性命名

const MainPostTopicComponent = React.memo(MainPostTopic);
const MainPostSubtopicComponent = React.memo(MainPostSubtopic)

export {
  MainPostTopicComponent,
  MainPostSubtopicComponent 
};

---

希望这能有所帮助

这就是我最后要做的：

const MainPostTopic = React.memo(
  function MainPostTopic(props) {
    console.log('Rendering MainPostTopic...');
    return(
      ...
    );
  }
);

const MainPostSubtopic= React.memo(
  function MainPostSubtopic(props) {
    console.log('Rendering MainPostSubtopic...');
    return(
      ...
    );
  }
);

export {MainPostTopic, MainPostSubtopic};

我为函数和导出保留了相同的名称

const MainPostTopic = memo(() => {
 ...
})
export { MainPostTopic };

const MainPostTopicComponent = React.memo(MainPostTopic);
const MainPostSubtopicComponent = React.memo(MainPostSubtopic)

export {
  MainPostTopicComponent,
  MainPostSubtopicComponent 
};

const MainPostTopic = React.memo(
  function MainPostTopic(props) {
    console.log('Rendering MainPostTopic...');
    return(
      ...
    );
  }
);

const MainPostSubtopic= React.memo(
  function MainPostSubtopic(props) {
    console.log('Rendering MainPostSubtopic...');
    return(
      ...
    );
  }
);

export {MainPostTopic, MainPostSubtopic};