Передача переменных в пользовательскую кнопку - PullRequest
Новая
       8

Передача переменных в пользовательскую кнопку

0 голосов
/ 22 марта 2020

У меня есть пользовательская кнопка, которая выглядит следующим образом: 

export default function CustomButton(isValid: any, email: any) {
    return (
        <Button
            type="submit"
            disabled={!isValid || !email}
            style={{
                background: '#6c74cc',
                borderRadius: 3,
                border: 0,
                color: 'white',
                height: 48,
                padding: '0 30px',
            }}
        >
            Remove User</Button>
    )
}

Сейчас я просто передаю isValid и email в качестве переменных, но они будут отличаться для всех страниц, где я использую это компонент кнопки. Как я могу изменить его, чтобы я мог передать список условий для disabled, а также другие параметры? и как я тогда назову этот компонент?

Во-вторых, сейчас, когда я использую его так на своей главной странице, он работает: 

{CustomButton(isValid, email)}

, но если я попытаюсь назвать его как это: 

<CustomButton isValid email></CustomButton>

неработоспособность кнопки не работает , и я могу нажать на нее, не выполнив также эти условия. Как мне это изменить?

Ответы [ 2 ]

2 голосов
/ 22 марта 2020

Я бы просто использовал disabled опору и обработал бы условие в родительском: 

const disabled = !isValid || !email;
// example with other conditions:
// const disabled = !isValid || !email ||!username || !password;
//...
<CustomButton disabled={disabled} />

тогда компонент может быть просто: 

type ButtonProps = { disabled: boolean };
export default function CustomButton({ disabled }: ButtonProps) { // you also forgot the destructure your props which is why it wasnt working
    return (
        <Button
            type="submit"
            disabled={disabled}
            style={{
                background: '#6c74cc',
                borderRadius: 3,
                border: 0,
                color: 'white',
                height: 48,
                padding: '0 30px',
            }}
        >
            Remove User</Button>
    )
}
0 голосов
/ 22 марта 2020

Если я понимаю, о чем вы говорите, вы хотите поместить ответственность (когда она действительна) в <Button />, что является неправильным подходом.

Каждый компонент должен быть агностическим c для каждого Другой. Это означает, что каждый компонент не должен заботиться о том, где он получает реквизит. Поэтому, если вы хотите передать список условий, сделайте это за пределами <Button />, а затем передайте условия в качестве реквизита. Если есть шаблон, вы можете просто создать другой <ConditionalButton ...listOfProps />, который напечатает <Button /> соответственно.

Относительно вашего второго вопроса. isValid и email истинны, поэтому !isValid (false) || !email (false) => false. Следовательно, disabled ложно.

...