在reactjs中创建公共组件

lskq00tm 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(135)

我正在reactjs中构建一个基于props.isConfig的通用示例组件，我需要显示一个按钮，目前我遵循以下方法，但我可以看到很多重复的代码，可以对其进行重构吗？
样本分量

import { Button } from '@mui/material';
import { MdMoreVert, MdAdd } from 'react-icons';

export default function Sample(props) {
  return (
  { props.isConfig && props.isConfig && <Button
      variant="basic"
      className="xyz"
  >
      <MdMoreVert size={20} />
  </Button>  
 }

{ !props.isConfig && <Button
      variant="outline"
      className="xyz"
      size="meduim"
      endIcon={<MdMoreVert size={16} />}
  >
      <MdAdd size={16} />
  </Button>}
  );
}

供试品组件

<Sample isConfig/>
<Sample/>

reactjs

来源：https://stackoverflow.com/questions/75073865/create-a-common-component-in-reactjs

1条答案

按热度按时间

oxcyiej71#

在这种情况下，最简单的解决方案是使用三进制。如果愿意，可以使用常量。

{
 props.isConfig
   ?
     < Button
       variant = "basic"
       className = "xyz"
       type = "button"
       aria-label = {intl.formatMessage(VERSION_MENU)}
       { ...buttonProps } 
     >
     < MdMoreVert size = { 20 } > 
     </ Button > 
   : < Button
       variant = "outline"
       className = "xyz"
       size = "meduim"
       endIcon = {<MdMoreVert size = {16}/>}
       aria - label = { intl.formatMessage(VERSION_MENU)}
       { ...buttonProps }
     >
     <MdAdd size = {16}/>
     </ Button >
}

还有

const commonProps = { 
    ...buttonProps, 
    'aria-label' : intl.formatMessage(VERSION_MENU),
    className: "xyz"
  }  

 const Btn1 = (< Button
   variant="basic"
   type="button"
   { ...commonProps } 
 >
   <MdMoreVert size={ 20 }/> 
 </ Button >) 

 const Btn2 = (< Button
   variant="outline"
   size="meduim"
   endIcon={<MdMoreVert size={16}/>}
   {...commonProps}  
 >
   <MdAdd size={16}/>
 </ Button >)

作为回报：

<>
  { props.isConfig ? Btn1 : Btn2 }
</>

赞(0）回复(0）举报 2023-01-12

我来回答

在reactjs中创建公共组件

1条答案

相关问题

热门标签

最新问答