按钮未在 React.js 中呈现

Question

我正在尝试在 React.js 中呈现一个按钮，它会弹出一个显示为“提交评论”的模式。 但是，当我在 RenderComments function 中添加 CommentForm 组件时，页面变为空白。当我添加 HTML 组件（如“p”）但不适用于 CommentForm 和“Button”时，它工作正常。 请帮忙。 我是 React 的新手。

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

   class CommentForm extends Component {

    constructor(props) {
    super(props);

    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
        isModalOpen: false
    };

    
    
}

toggleModal() {
    this.setState({
        isModalOpen: !this.state.isModalOpen
    })
}

handleSubmitComment(values) {

}

render() {
    return (
         <div>
            <Button outline onClick={this.toggleModal}>
                <span className="fa fa-pen fa-lg">Submit Comment</span>
            </Button>

            <Modal isOpen={this.state.isModalOpen}  toggle={this.toggleModal}>
                <ModalHeader toggle={this.toggleModal}>Submit Comment</ModalHeader>
                <ModalBody>

                </ModalBody>
            </Modal>
         </div>
    );
}

  }


    function RenderDish({dish}) {

 if (dish != null) {
    return (
        <div className='col-12 col-md-5 m-1'>
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle> {dish.name}</CardTitle>
                    <CardText> {dish.description} </CardText>
                </CardBody>
            </Card>
        </div>   
    );
}
else {
    return (
        <div></div>
    );
}
    }

    



    function RenderComments({comments}){
if (comments != null) 
    return (
        <div className='col-12 col-md-5 m-1'>
            <h4> Comments </h4>
            <ul className='list-unstyled'>
                {comments.map(comment => {
                    return (
                        <li key={comment.id}>
                        <p>{comment.comment}</p>
                        <p>-- {comment.author},
                        &nbsp;
                        {new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: '2-digit'
                        }).format(new Date(comment.date))}
                        </p>
                        </li>
                    );
                })}
            </ul>
            <CommentForm />
        </div>
    );
    else
        return ( <div></div>);
    }


    const DishDetail = (props) => {

console.log('DishDetail Component render is invoked')

console.log(props.dish);
console.log(props.comments);

if (props.dish != null) 
    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>
                    <hr />
                </div>
            </div>
            <div className="row">
                <RenderDish dish={props.dish} />
                <RenderComments comments={props.comments} />
            </div>
        </div>
    );      
else
    return(
        <div></div>
    );
    }



    export default DishDetail; 

Answer 1

我不相信 React 公开了一个Button组件，您似乎试图在import { Button } from 'react';

那个Button也应该来自reactstrap package 吗？

Answer 2

而不是这个：

import { Button } from 'react';

您应该使用import { Button } from 'react-bootstrap'
或import { Button } from 'reactstrap'选择你喜欢的库。

另外我不认为bootstrap-react是真的（也有一个但不常用）。 对于这行代码import { Modal, ModalHeader, ModalBody } from "bootstrap-react"; 我相信它应该是import { Modal, ModalHeader, ModalBody } from "reactstrap"; 因为所有这些你调用的（Modal，ModalHeader，ModalBody）都与 reactstrap 完美匹配。

Answer 3

除了@FaizErturk 的回答，在toggleModal中应该使用setState的回调参数：

this.setState((state)=>({
    isModalOpen: !state.isModalOpen
}));

这可以防止过时的 state值被用于更新。
请参阅https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 4

在 < ModalContent > 中添加一些东西，并尝试使用更多的 React hooks 语法，这样更简洁，更容易调试等。我的建议是在任何使用组件的情况下都不要使用 DEFAULT 导出，因为它会导致一些隐藏的导入错误。