按鈕未在React.js中呈現

我正在嘗試在 React.js 中呈現一個按鈕，該按鈕會彈出一個顯示“提交評論”的模式。但是，當我在 RenderComments 函式中添加 CommentForm 組件時，頁面變為空白。當我添加像“p”這樣的 HTML 組件但對 CommentForm 和“Button”不起作用時，它作業正常。請幫忙。我是反應新手。

   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; 

uj5u.com熱心網友回復：

我不相信 React 公開了一個Button組件，你似乎試圖在其中使用它import { Button } from 'react';

那也Button應該來自reactstrap包裹嗎？

uj5u.com熱心網友回復：

而不是這個：

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 完美匹配。

uj5u.com熱心網友回復：

除了@FaizErturk 的回答，在toggleModal回呼引數中setState應該使用：

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

這可以防止過時的狀態值被用于更新。
請參閱https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

uj5u.com熱心網友回復：

在 < ModalContent > 中添加一些東西，并嘗試使用更多的 React hooks 語法，這樣更簡潔，更容易除錯等。我的建議是在任何使用組件的情況下都不要使用 DEFAULT 匯出，因為它會導致一些隱藏的匯入錯誤。

標籤：javascript 反应

上一篇：嘗試構建一個陣列，用擲骰子填充每個位置

下一篇：如何逐步向物件添加屬性？