@livd98

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

Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?
<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>
      )}
    </>
  )
}
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?


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

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


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

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

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

Что бы более понятно было как создавать компоненты - вот вполне неплохая статья - https://habr.com/ru/company/yandex/blog/560194/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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:""}}/>
)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы