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

问题描述

我们可以在不使用钩子的情况下在功能组件中创建可切换模式吗？实际上，我正在尝试在功能组件中设计模态，但无法实现我想要的目标。在Google上，我能找到的只是钩子。这是我写的，但是没有用

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，并且在单击按钮后不会更改

解决方法

实际上，您的代码可以工作，但是由于react不知道发生了什么变化，因此不重新渲染react组件，这就是为什么您必须使用useState钩子。

代码修改不多，只需将isModalOpen状态放在函数顶部

const encoded = fs.readFileSync("./base64.txt",{ encoding: "base64" });

modal-dialog reactjs reactjs