时间戳

首页 > 解决方案 > Button 中的三元运算符导致“...”预期 TS(1005) 错误

reactjs - Button 中的三元运算符导致“...”预期 TS(1005) 错误

问题描述

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

(Example: 1)
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

我的代码是：

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

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

错误生成代码部分：

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

标签： reactjs

解决方案

disabled并且active是单独的 boolean props，这些变体应该可以工作：

// 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>;

推荐阅读