children Flashcards
Children? Типизация Button
Типизация:
Children?: ReactNode
При типизации кнопки можем использовать следующую запись:
ButtonHTMLAttributes<HTMLButtonElement>
<button onClick = {onClick}> {children} </button>
Если необходимо добавить доп св-во:
type Props = {
backGround?: string
} & ButtonHTMLAttributes<HTMLButtonElement></HTMLButtonElement></HTMLButtonElement>
Omit - вырезает из типизации, то что нам не нужно (откуда берем и что необходимо вырезать?)
Пример.
type ColorsProps = {
color1?: string
color2?: string
color3?: string
color4?: string
color5?: string
}
type Props = {
backGround?: string
} & ButtonHTMLAttributes<HTMLButtonElement> & Omit<ColorsProps, 'color4' | 'color5'></HTMLButtonElement>
При стилизации.
Если мы берем из файла css и хотим перенести в App.tsx
import s (любое наименование) from ./путь где стилизация
className = {s.color},
SupperButton
чтобы передать стилизацию кнопке, то необходимо опрокинуть {…restProps}
export const SuperButton: React.Fc<Props> = (props: Props) => {
const{onClick, color, children, className, ...restProps}
}
return (
<button onClick = {onClick} {...restProps}> {children} </button>
)</Props>
ИЛИ можно передать стилизацию через className
<button onClick = {onClick} className = {className}> {children} </button>
}
Двойной тернарный:
${color === ‘red’ ? s.red : color === ‘secondary’ ? s.secondary : s.default}
Если цвет красный - красный, если второй - второй, если нет то просто дефолт
Формочки:
Modal.tsx
interface ModalProps {
children: ReactNode;
}
export const Modal = ({children}: ModalProps) => {
return (
<div>
{children}
</div>
)
}
App.tsx
<Modal>
<input></input>
<input></input>
<button>Send<button>
</Modal>
react-hook-form
</button></button></Modal>
