渲染React组件的通用方法取决于两个道具

Question

I've got a component that gets two props, function and node(or string with label text), depends on these props I render the icon with some label. In future, I'm going to add more button and want to create the generic method that rendered this icon more flexible. So how to create such generic method for that?

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

Maybe do something like:

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} />;
  }
}

You even the possiblity to throw those EXPORT_EXCEL and REFRESH into array. Instead of having them loose put them in an array like so:

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

And then loop through to create the Wrapper.

But then it's really up to you and your preferences and app's requirements

Answer 2

The entire idea behind React is to be able to create a unique component for every kind of usage. That is the entire philosophy behind React composability. Don't understand why would you want to wrap it.