javascript - 渲染 React 组件的通用方法取决于两个 Prop

Question

我有一个组件有两个 Prop ，函数和节点(或带有标签文本的字符串)，取决于这些 Prop 我用一些标签渲染图标。将来，我将添加更多按钮，并希望创建使该图标更加灵活的通用方法。那么如何为此创建这样的通用方法呢？

const Wrapper = ({onRefresh, onExportToExcel, actionsLabel}) => {
   return 
    {onRefresh && !!actionsLabel.refresh &&
                    <InlineIconButton name='refresh'  label={actionsLabel.refresh} onClick={onRefresh} icon={<Autorenew/>} aria-label="Refresh"/>}
    {onExportToExcel && !!actionsLabel.exportToExcel &&
                    <InlineIconButton name='exportToExcel' label={actionsLabel.exportToExcel} onClick={onExportToExcel} icon={<FileDownload/>} aria-label="ExportToExcel"/>}
}

<Wrapper onRefresh={()=> {}} onExportToExcel ={()=> {}} actionLabel={refresh: 'refresh', exportToExcel: 'export'}>

Answer 1

也许可以这样做:

const EXPORT_EXCEL = { 
  key: "EXPORT_EXCEL", 
  label: "export",
  ariaLabel: "Export Excel",
  icon: <Autorenew/>,
  handler: params => { /* your function */ }
};
const REFRESH = { 
  key: "REFRESH", 
  label: "refresh",
  ariaLabel: "Refresh",
  icon: <FileDownload/>,
  handler: params => { /* your function */ } 
};

<Wrapper type={EXPORT_EXCEL} />;

const Wrapper = ({ type }) => {
      return <InlineIconButton name={type.key} label={type.label} onClick={type.handler} icon={type.icon} aria-label={type.ariaLabel ? type.ariaLabel : type.label} />;
  }
}

您甚至可以将那些 EXPORT_EXCEL 和 REFRESH 放入数组中。不要让它们松散，而是像这样将它们放在一个数组中:

const BUTTONS = [
  { 
    key: "EXPORT_EXCEL", 
    label: "export",
    ariaLabel: "Export Excel",
    icon: <Autorenew/>,
    handler: params => { /* your function */ }
  },
  { 
    key: "REFRESH", 
    label: "refresh",
    ariaLabel: "Refresh",
    icon: <FileDownload/>,
    handler: params => { /* your function */ } 
  },
];

然后循环创建包装器。

但这真的取决于您和您的偏好以及应用程序的要求