Как создать универсальную кнопку?

Question

[ffads livd00]

Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?
<Button color={"inherit"}/>
Вижу выход только такой

<div onClick={() => {
     toggleAdd(!open)
     setUser("")
     setPhone("")
}}>
     <Button color={"inherit"}/>
</div>

Но при выполнении ТЗ сказали, что так лучше не делать и я забыл спросить почему...
Кнопка выглядит так

export const Button = ({phone, text, color, textColor, border}) => {
  return (
    <>
      {phone ? (
        <a className="phone" href={`tel:${phone}`} ><img src="./Assets/Phone.svg" alt="" /></a>
      ):(
        <button 
          className="submit" 
          style={{
            background: color,
            color: textColor,
            border: border,
          }}
        >
          {text}
        </button>
      )}
    </>
  )
}

Comments

[Алексей Уколов]

нельзя ставить обработчик событий на компонент

Почему?

[ffads livd00]

Алексей Уколов, а как его поставить?

<Button onClick={() => console.log('test')}>Button</Button>

Это не работает

[Алексей Уколов]

Ну а вы внутри компонента-то переданную функцию привязываете к настоящей кнопке?

[TheOnlyFastCoder2]

ffads livd00, может нужно было написать
<button> </button> а не <Button> </Button> ?

[drotsyk]

Алексей Уколов, вы хотите, чтобы я передавал функцию в кнопку и там ее ставил?Я просто думал можно сразу поставить на Button

[WbICHA]

drotsyk, ты вообще кто и по какой причине отвечаешь как автор?

Answer 1

[approximate solution]

Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?

Во первых инлайнить стили - моветон, вам это должны были сказать. Хотите сделать разный дизайн кнопок - используйте clsx и передавайте стили через className внутри компонента через пропс

<Button className="button-any">Какой-то текст</Button>

И внутри Button принимает className куда вы пропсом его передаете, внутренности кнопки у вас {children}

Как это сделать если нельзя ставить обработчик событий на компонент?

Кто сказал? По принципам SOLID, у вас компонент не должен знать о сложной логикике, поэтому вы внутри компонента создаете onClickHandler, в которой пропсом спускаете функцию из родительского, которая уже выполняет логику.

Что бы более понятно было как создавать компоненты - вот вполне неплохая статья - https://habr.com/ru/company/yandex/blog/560194/

Answer 2

[TheOnlyFastCoder2]

Я не понимаю , зачем вам нужно менять местами ссылку с кнопкой , в чем смысл ?
Я понимаю вы хотите сделать кнопку одну но для разных целей , но так не очень хорошо делать как по мне

//css
.submit.myStyles1 {
}
.submit.myStyles2 {
}
.submit.myStyles3 {
}

const myfunction1 = () => {}
const myfunction2 = () => {}


const PhoneBTN = ({phone}) => (
  <a className="phone" href={`tel:${phone}`}>
    <img src="./Assets/Phone.svg" alt="" />
  </a>
)

const Button = ({type,text}) => {
  
  return (
    type === "phone" ? 
    <PhoneBTN {...{phone:text}} onClick={myfunction1}/>: 
    <button className="submit myStyles" onClick={myfunction2}>{text}</button> 
  )
} 

const render = () => (
  <Button {...{type:"phone",text:""}}/>
)