Javascript 将变量传递到自定义按钮

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

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>
    )
}

<CustomButton isValid email></CustomButton>

但如果我试着这样称呼它：

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>
    )
}

<CustomButton isValid email></CustomButton>

---

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

如果我理解你的意思，你想把责任（在有效时）放在

内，这是一种不正确的方法

每个组件都应该彼此不可知。也就是说，每个组件都不应该关心从哪里获得道具。因此，如果要传递条件列表，请在

之外执行，然后将条件作为道具传递。如果有模式，您只需创建一个不同的

，相应地打印

---

关于你的第二个问题<代码>是有效的和

电子邮件

是正确的，所以

！是否有效（错误）| |！电子邮件（错误）=>错误

。因此，

disabled

是错误的。

如果我理解你的意思，你想把责任（在有效时）放在

里面，这是不正确的方法

每个组件都应该彼此不可知。也就是说，每个组件都不应该关心从哪里获得道具。因此，如果要传递条件列表，请在

之外执行，然后将条件作为道具传递。如果有模式，您只需创建一个不同的

，相应地打印

---

关于你的第二个问题<代码>是有效的和

电子邮件

是正确的，所以

！是否有效（错误）| |！电子邮件（错误）=>错误

。因此，

disabled

为false。

我只需使用

disabled

道具并在父级中处理条件：

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

const disabled=！是有效的！电子邮件；
//其他条件下的示例：
//const 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>
    )
}

type ButtonProps={disabled:boolean}；
导出默认函数CustomButton（{disabled}:ButtonProps）{//您还忘记了解构您的道具，这就是它无法工作的原因
返回(
删除用户
)
}

我只需要使用一个

禁用的

道具，并在父级中处理条件：

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

const disabled=！是有效的！电子邮件；
//其他条件下的示例：
//const 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>
    )
}

type ButtonProps={disabled:boolean}；
导出默认函数CustomButton（{disabled}:ButtonProps）{//您还忘记了解构您的道具，这就是它无法工作的原因
返回(
删除用户
)
}

我想你错过了道具周围的花括号。请看一下下面的内容，看看所有可能的方法来向组件传递道具。我想你没有很好地理解我的问题。我想传递的不是

isValid

和

email

，而是

disabled

属性的条件列表，因为每次调用此组件@AWolfOK时传递的变量和条件可能不同，我已经更新了演示。如果我理解正确，你会想把一个带有多种条件的道具传递给你的组件，如果一个道具是falsy，你会想禁用它。你可以传递一个数组，并用

数组检查它。一些
。我认为你缺少了道具周围的花括号。请看一下下面的内容，看看所有可能的方法来向组件传递道具。我想你没有很好地理解我的问题。我想传递的不是
isValid
和
email
，而是
disabled
属性的条件列表，因为每次调用此组件@AWolfOK时传递的变量和条件可能不同，我已经更新了演示。如果我理解正确，你会想把一个带有多种条件的道具传递给你的组件，如果一个道具是falsy，你会想禁用它。您可以传递一个数组并用
数组检查它。一些
。在Typescript中，
（{disabled}）
不起作用。它说，
绑定元素“disabled”隐式地具有“any”类型。ts（7031）
。当我添加
disabled:any
时，any会给出相同的错误，快速修复方法是删除解构。React希望功能组件有一个props对象。所以
function（props）{const disabled=props.disabled；}
可以写成
function（{disabled:Boolean}）{…}
。有关构造的更多详细信息，请查看。以下是了解React with Typescript的重要资源-我还在学习React的TS。谢谢！如何在组件中准确地写入这些条件？如果我尝试
我会在
禁用时得到一个错误，即
类型“{isValid:boolean；email:boolean；}”不可分配给类型“boolean”。ts（2322）
并且如果我移除内括号，我仍然会得到语法错误。因此，按照我的设置方式，您不会将
email
或
isValid
传递到组件中。您在父级中执行所有计算，组件关心的是
disabled
是否为true/false。例如：
。也可以将其另存为变量。更新了我对reflectIn Typescript的回答，
（{disabled}）
不起作用。它说，
绑定元素“disabled”隐式地具有“any”类型。ts（7031）
。当我添加
disabled:any
时，any会给出相同的错误，快速修复方法是删除解构。React希望功能组件有一个props对象。所以
function（props）{const disabled=props.disabled；}
可以写成
function（{disabled:Boolean}）{…}
。有关描述的更多详细信息，请查看。下面是一个非常好的资源，可以了解更多信息