Reactjs 按钮中的三元运算符导致''；预期TS（1005）错误

我在按钮中使用了三元运算符，并面临预期的“…”TS（1005）错误。所讨论的语法与reactjs网站中提供的语法完全相同。（示例：1）

（示例：1）
render（）{
const isLoggedIn=this.state.isLoggedIn；
返回(
用户是{isLoggedIn？'当前'：'未'}登录的。
);
}

我的代码是：

import React, { useState } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import Modal from 'react-bootstrap/Modal'
import { Link } from 'react-router-dom'

export default function LoginSignupModal() {
    const [show, setShow] = useState(false)
    const handleClose = () => setShow(false)
    const handleShow = () => setShow(true)

    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [errorPassword, setErrorPassword] = useState(false)

    function handleRegister() {
        console.log("name", name)
    }
    function handlePasswordConfirmation(data) {
        if (data.target.value != password) {
            console.log("didn't match")
            setErrorPassword(true)
        } else {
            console.log("matched")
            setErrorPassword(false)
        }
    }


    return (
        <>
            <Button variant="primary" onClick={handleShow} style={{ marginLeft: '5px' }}>
                Signup
        </Button>

            <Modal
                show={show}
                onHide={handleClose}
                backdrop="static"
                keyboard={false}
            >
                <Modal.Header closeButton>
                    <Modal.Title>Registration Form</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group controlId="signupName">
                            <Form.Label>Name</Form.Label>
                            <Form.Control value={name} onChange={(data) => setName(data.target.value)} placeholder="John Doe" />
                        </Form.Group>

                        <Form.Group controlId="formBasicEmail">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control value={email} onChange={(data) => setEmail(data.target.value)} type="email" placeholder="xyz@email.com" />
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control value={password} onChange={(data) => setPassword(data.target.value)} type="password" placeholder="Password" />
                        </Form.Group>

                        <Form.Group controlId="formBasicPasswordConfirmation">
                            <Form.Label>Confirm Password</Form.Label>
                            <Form.Control type="password" onChange={(data) => handlePasswordConfirmation(data)} placeholder="Re-enter Password" />
                        </Form.Group>
                        <-- **ERROR IN THE FOLLOWING LINE** -->
                        <Button variant="primary" type="submit" {(errorPassword) ? "disabled" : "active"}>Register</Button>
                        <Button variant="secondary" onClick={handleClose} style={{ marginLeft: "5px" }}>Close</Button>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    By signing up, you agree to our privacy policy and terms and conditions.
                </Modal.Footer>
            </Modal>
        </>
    );
}

import React，{useState}来自“React”
从“反应引导/按钮”导入按钮
从“react引导/表单”导入表单
从“反应引导/模式”导入模式
从“react router dom”导入{Link}
导出默认函数LoginSignupModal（）{
const[show，setShow]=useState（false）
常量handleClose=（）=>setShow（false）
常量handleShow=（）=>setShow（真）
const[name，setName]=useState（“”）
const[email，setEmail]=useState（“”）
const[password，setPassword]=useState（“”）
常量[errorPassword，setErrorPassword]=useState（false）
函数handleRegister（）{
console.log（“name”，name）
}
功能手柄密码确认（数据）{
if（data.target.value！=密码）{
console.log（“不匹配”）
setErrorPassword（真）
}否则{
控制台日志（“匹配”）
setErrorPassword（错误）
}
}
返回(
报名
登记表
名称
setName（data.target.value）}占位符=“John Doe”/>
电子邮件地址
setEmail（data.target.value）}type=“email”占位符=”xyz@email.com" />
密码
setPassword（data.target.value）}type=“password”placeholder=“password”/
确认密码
handlePasswordConfirmation（data）}占位符=“重新输入密码”/>
登记
接近
通过注册，您同意我们的隐私政策和条款和条件。
);
}

在这里，我试图根据errorPassword状态在按钮上添加禁用/激活。但这给了我一个错误。

生成代码部分时出错：

<Button variant="primary" type="submit" {(errorPassword) ? "disabled" : "active"}>Register</Button>

寄存器

禁用

和

激活

时，这些变体应能工作：

// Recommended
<Button disabled={errorPassword} active={!errorPassword}>
  Register
</Button>

// Unreadable
<Button {...{ [errorPassword ? "disabled" : "active"]: true }}>
  Register
</Button>

// Same as above just a bit more readable
const errorPasswordProps = { [errorPassword ? "disabled" : "active"]: true };
<Button {...errorPasswordProps}>Register</Button>;

//推荐
登记
//不可读
登记
//同上，只是可读性更强一点
const errorPasswordProps={[errorPassword？“disabled”：“active”]：true}；
登记

这是material在其源代码中设置其ternity的方式

 <Button {...(errorPassword ? { disabled: true } : { active: true })}>
      Register
 </Button>

登记

但更好的表达方式是在按钮本身中定义

hasError

属性，并传递

hasError={errorPassword}

{（errorPassword）？“disabled”：“active”}

它应该作为道具传递。像

isActive={（errorPassword）-“disabled”：“active”}

。现在您可以使用

props.isActive

启用/禁用按钮。而是传递一个布尔值。

 <Button {...(errorPassword ? { disabled: true } : { active: true })}>
      Register
 </Button>