Question

我有一个自定义按钮，如下所示：

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>

按钮的禁用功能无效，我也可以在不满足这些条件的情况下单击它。我该如何更改？

Answer 1

我只会使用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>
    )
}

Answer 2

如果我理解您的意思，您想将责任（有效时）置于<Button />内，这是不正确的方法。

每个组件应彼此不可知。意思是，每个组件都不应该在哪里获得道具。因此，如果要传递条件列表，请在<Button />之外进行操作，然后将条件作为道具传递。如果存在某种模式，则可以简单地创建一个不同的<ConditionalButton ...listOfProps />并相应地打印<Button />。

关于第二个问题。 isValid和email是正确的，所以!isValid (false) || !email (false) => false。因此，disabled为假。

将变量传递到自定义按钮

2 个答案: