javascript - 渲染React组件的通用方法取决于两个 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'}>

最佳答案

也许做类似的事情：

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 */ }
  },
];

然后循环遍历以创建包装器。

但这实际上取决于您以及您的喜好和应用程序的要求

关于javascript - 渲染React组件的通用方法取决于两个 Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48384486/