Javascript 如何使用ReactJS中的函数删除重复代码

我在我的项目中编写了下面的代码，我想用一个函数删除不同视图端口的重复代码。谁能帮帮我怎么做。所有不同的视图端口用于使组件响应不同设备的不同断点

    import * as React from 'react';
    import { ViewExtraLarge, ViewLarge, ViewMedium, Viewport, ViewSmall } from '@shared-ui/viewport-context';
    import { UitkDialogContent, UitkFullscreenDialog } from 'uitk-react-dialog';
    import { ToolbarType, UitkToolbar } from 'uitk-react-toolbar';
    
    export interface SeatMapDialogProps {
      onCloseCB?: () => void;
      shouoldDialogShow?: boolean;
      header?: string;
      iconLabel?: string;
      onOpenCB?: () => void;
      shouldReturnFocusOnClose?: boolean;
      isStrictFullscreen?: boolean;
      isWideContent?: boolean;
    }
    
    export const SeatMapDialog: React.FC<SeatMapDialogProps> = (props) => {
      const { onCloseCB, shouoldDialogShow, header, iconLabel, onOpenCB, shouldReturnFocusOnClose, isStrictFullscreen } = props;
    
    ```
    return (
    <>
      <UitkFullscreenDialog
        dialogShow={shouoldDialogShow}
        strictFullscreen={isStrictFullscreen}
        returnFocusOnClose={shouldReturnFocusOnClose}
        openCallback={onOpenCB}
        closeCallback={onCloseCB}
      >
        <UitkToolbar action={onCloseCB} header={header} iconLabel={iconLabel} />

        <UitkDialogContent key="UitkDialogContent-1" className="UitkSeatmapDialogContent">
          <div key="UitkComponenetWrapper">
            <Viewport>
              <ViewSmall>
                <>
                  <div>LegendDropDown</div>
                  <div>Seatmap</div>
                </>
              </ViewSmall>
              <ViewMedium>
                <>
                  <div>LegendDropDown</div>
                  <div>Seatmap</div>
                </>
              </ViewMedium>
              <ViewLarge>
                <>
                  <div>
                    <div>LegendDropDown</div>
                    <div>LegendSheet</div>
                  </div>
                  <div>Seatmap</div>
                </>
              </ViewLarge>
              <ViewExtraLarge>
                <>
                  <div>
                    <div>LegendDropDown</div>
                    <div>LegendSheet</div>
                  </div>
                  <div>Seatmap</div>
                </>
              </ViewExtraLarge>
            </Viewport>
          </div>
        </UitkDialogContent>
      </UitkFullscreenDialog>
    </>
  );
};
    ```

import*as React from'React'；
从“@sharedui/Viewport context”导入{viewextralge、ViewLarge、ViewMedium、Viewport、ViewSmall}；
从“uitk反应对话框”导入{UitkDialogContent，UitkFullscreenDialog}；
从“uitk反应工具栏”导入{ToolbarType，UitkToolbar}；
导出接口SeatMapDialogProps{
onCloseCB？：（）=>无效；
shouldDialogShow？：布尔值；
标题？：字符串；
iconLabel？：字符串；
onOpenCB？：（）=>无效；
shouldReturnFocusOnClose？：布尔值；
IsStritfullScreen？：布尔值；
isWideContent？：布尔值；
}
导出常量SeatMapDialog:React.FC=（道具）=>{
const{onCloseCB，shouldDialogShow，header，iconLabel，onOpenCB，shouldReturnFocusOnClose，IsStritfullScreen}=props；
```
返回(
传奇故事
邻座地图
传奇故事
邻座地图
传奇故事
传奇
邻座地图
传奇故事
传奇
邻座地图
);
};
```

您只需将其提取到函数中，并在返回的jsx中使用它即可

...
const renderLegend = (showLegendSheet: boolean) => <>
  <div>
    <div>LegendDropDown</div>
    {showLegendSheet ? <div>LegendSheet</div> : <></>}
  </div>
  <div>Seatmap</div>
</>

return (
<>
  <UitkFullscreenDialog
    dialogShow={shouoldDialogShow}
    strictFullscreen={isStrictFullscreen}
    returnFocusOnClose={shouldReturnFocusOnClose}
    openCallback={onOpenCB}
    closeCallback={onCloseCB}
  >
    <UitkToolbar action={onCloseCB} header={header} iconLabel={iconLabel} />

    <UitkDialogContent key="UitkDialogContent-1" className="UitkSeatmapDialogContent">
      <div key="UitkComponenetWrapper">
        <Viewport>
          <ViewSmall>
            {renderLegend()}
          </ViewSmall>
          <ViewMedium>
            {renderLegend()}
          </ViewMedium>
          <ViewLarge>
            {renderLegend(true)}
          </ViewLarge>
          <ViewExtraLarge>
            {renderLegend(true)}
          </ViewExtraLarge>
        </Viewport>
      </div>
    </UitkDialogContent>
  </UitkFullscreenDialog>
</>

。。。
const renderLegend=（showLegendSheet:boolean）=>
传奇故事
{showLegendSheet？LegendSheet:}
邻座地图
返回(
{renderGend（）}
{renderGend（）}
{renderGend（true）}
{renderGend（true）}

---

我还建议将图例提取到一个单独的组件中，但由于您的示例是如此简单的函数，如

renderLegend

应该做的事情

您不需要将所有内容都包装在片段中

…