“Reactjs”如何在不使用钩子的情况下在功能组件内创建模式

Question

我们能否在不使用钩子的情况下在功能组件中创建可切换的模式。实际上我正在尝试在功能组件中设计一个模态，但我无法实现我所尝试的。在谷歌上，我能找到的只有钩子。 这是我写的，但它不起作用

import React from 'react';
import { Card, CardImg, CardImgOverlay, CardBody, CardText, CardTitle, Breadcrumb, BreadcrumbItem, Button, Modal, ModalHeader } from 'reactstrap';
import { Link } from 'react-router-dom';

let isModalOpen = false;

const toggleModal = () => {
   isModalOpen = !isModalOpen;
   console.log(isModalOpen);
}

function RenderComments({comments}) {
if(comments!=null){
    const list = comments.map((comment) =>{
        let options = { year: 'numeric', month: 'long', day: 'numeric' };
        let dt = new Date(comment.date);
        return (
            <li key={comment.id}>
                {comment.comment}<br/><br/>
                -- {comment.author}, {dt.toLocaleString('en-US', options)}
                <br/><br/>
            </li>  
        );
    });
    return(
        <div className="col-12 col-md-7 mt-3 mb-3">
            <h4>Comments</h4>
            <ul className="list-unstyled">
                {list}
            </ul>
            <Button onClick={toggleModal} outline color="secondary"><span className="fa fa-pencil"></span> Submit Comment</Button>
        </div>
    );
}else{
    return (<div></div>);
}  
}

const DishDetail = (props) => {
if(props.dish!=undefined){
    return(
        <div className="container">
            <div className="row">
                <Breadcrumb>
                    <BreadcrumbItem><Link to="/menu">Menu</Link></BreadcrumbItem>
                    <BreadcrumbItem active>{props.dish.name}</BreadcrumbItem>
                </Breadcrumb>
                <div className="col-12">
                    <h3>{props.dish.name}</h3>
                </div>
                <RenderDish dish = {props.dish} />
                <RenderComments comments = {props.comments} />
            </div>
            <Modal isOpen={isModalOpen} toggle={toggleModal}>
                <ModalHeader toggle={toggleModal}>
                    Login
                </ModalHeader>
            </Modal>
         </div>
    )
}else{
    return(<div></div>);
}
}

export default DishDetail;

有人能解释一下为什么这段代码不起作用吗？

在调试器中，我发现模态的 isOpen 属性始终为 false，并且在单击按钮时不会改变

Answer 1

实际上你的代码可以工作，但是 react 组件没有重新渲染，因为 react 不知道有什么变化，这就是你必须使用 useState 钩子的原因。

代码改动不大，只是把isModalOpen状态放在函数顶部

const [isModalOpen, setisModalOpen] = useState(false);

const toggleModal = () => {
   setisModalOpen(!isModalOpen);
   console.log(isModalOpen);
}