Кнопка

Question 1

Button

Answer 1

type SuperButton = {
onClick: () => void,
color: string,
title?: string,
children?: React.RectNode }

или

type SuperButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
background?: string
} - дополнение</HTMLButtonElement>

export const SuperButton = (props: SuperButton) => {
const {onClick, color, children, title, ..rest} = props
return (
<button>{title}<button></button>
)}</button>

App
в App - children - это все что зажато внутри тегов
function App () {
<SuperButton onClick = {() => {}} color = {‘red’}>
Red super Button
</SuperButton>
}

SuperButton
export const SuperButton = (props: SuperButton) => {
const {onClick, color, children, title, ..rest} = props
return (
<button>{children}<button></button>
)}</button>

Если мы хотим убрать какие-либо стили можно использовать Omit

type ColorsProps = {
color1?:string,
color2?string,
color3?string,
color4?string,
color5?string,
}

type SuperButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
background?: string
} & Omit <ColorProps, 'color4' | 'color 5'> - Omit удаляет лишнее</HTMLButtonElement>

в restProps - можно передать стили
App
<SuperButton onClick = {() => {}} classname = {style.colorRed}>
Red super Button
</SuperButton>
<SuperButton onClick = {() => {}} classname = {style.colorBlue}>
Blue super Button
</SuperButton>

SuperButton
export const SuperButton = (props: SuperButton) => {
const {onClick, color, children, title, ..rest} = props
return (
<button {…rest}>{children}<button></button>
)}

или

SuperButton
export const SuperButton = (props: SuperButton) => {
const {onClick, color, children, title, classname ..rest} = props
return (
<button classname = {classname}>{children}<button></button>
)}

Написание стилей
const finalClassname = `
${s.button}
${color === ‘red’ ? s.red : color === ‘secondary’ ? s.secondary : s.default}
${disabled ? s.disabled : ‘’}
`

Children чаще всего используются для модальных окон.