单击按钮后，模态主体无法在html中呈现组件

Question

我是新来的反应。 我尝试使用按钮onClick调用函数以在html中呈现组件。

执行后，不会出现在页面上。 像这样： https : //imgur.com/a/jnPwEGN

但是当我检查html元素（F12）时，react-c3js元素包含了该元素，然后它突然出现在屏幕上，如下所示： https ://imgur.com/a/qHbv1zq

但是，如果我不看它并等待，该图表将永远不会出现。

这是我的.js文件

// draw the Chart in html
function drawHistoryChart(data) {
    console.log("data: ", data);
    const data2 = {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    };
    ReactDOM.render(<C3Chart data={data2} />, document.getElementById('react-c3js'));
}

//
class CarPark extends React.Component {
    static defaultProps = {
        parkId: "Not Found Id",
        parkName: "Not Found Name",
        address: "Not Found Address",
        totalSpace: 0,
        surplusSpace: 0,
        payGuide: "Not Found Pay Guide",
    };
    static propTypes = {
        parkId: PropTypes.string.isRequired,
        parkName: PropTypes.string.isRequired,
        address: PropTypes.string.isRequired,
        totalSpace: PropTypes.number.isRequired,
        surplusSpace: PropTypes.string.isRequired,
        payGuide: PropTypes.string.isRequired,
    };

    // Fetch data and pass data to drawHistoryChart Function
    requestHistoryOfCarPark(parkId, week, time) {
        fetch("/findHistoryByCarPark?place=" + parkId + "&week=" + week + "&time=" + time)
            .then((response) => {
                return response.json();
            }).then((jsonData) => {
                drawHistoryChart(jsonData);
            }).catch((err) => {
                console.log('error: ', err);
            });
    }

    render() {
        return (
            <div className="card">
                <div className="card-header">
                    <button className="btn" data-toggle="modal" data-target="#myModal" onClick={() => this.requestHistoryOfCarPark(this.props.parkId, getWeek(), getTime())}><i className='fas fa-search' style={style}></i></button>
                    {this.props.parkId}-{this.props.parkName}
                </div>
                <div className="card-body">
                    <div>地址：{this.props.address}</div>
                    <div>總車位：{this.props.totalSpace}</div>
                    <div>剩餘車位：{this.props.surplusSpace}</div>
                    <div>價錢資訊：{this.props.payGuide}</div>
                </div>
            </div >
        )
    }
}

这是我的HTML

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <div id="react-c3js"></div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

有没有人遇到这个问题？ 非常感谢您的帮助！

Answer 1

问题

您的代码无法正常运行，因为您没有正确处理Java代码以正确切换Modal。 React是一个Javascript库，如果您正在使用它，请充分利用它。

您无需在HTML中传递data-toggle属性。 如果您正在使用React，则不希望使用像HTML这样的直接HTML。 您想要创建一个Modal功能组件并使用JSX。 将您的modal HTML转换为一个接受isOpen并具有onClose方法的React功能组件。

解

这里没有一种适合您问题的解决方案。 您可以通过几种方法来解决这个问题。 您可以在库的肩膀上点击创建一个Modal组件，以完成繁重的工作。 强烈建议您使用后者，因为您是新手。 然后自己动手构建自己的组件。

React最受欢迎的两个库是Material UI或Reactstrap 。

您可以在此处在Material UI上阅读： https : //material-ui.com/ 。 和Reactstrap在这里： https ://reactstrap.github.io/

这些库具有大量的Bootstrap好东西，您可以在应用程序中使用它们。

这是一个如何在组件中使用Reactstrap的示例。

Reactstrap：模态

将Reactstrap添加到您的项目中。 使用npm： npm i reactstrap react-dom或使用yarn： yarn add reactstrap react-dom 。 由于您正在使用bootstrap类，因此我假设您也安装了bootstrap。 此时，您应该可以开始使用reactstrap了。

更新停车场组件

import React, { Component, useState } from 'react';
import { Button, Card, CardHeader, CardBody, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class CarPark extends Component {
   const [isOpen, setIsOpen] = useState(false) //creating a state variable isOpen whose default value is false

  //fetch your data method

   //function for toggling the modal, accepts no params
   //ES6 notation, the arrow function
   const toggleModal = () => {
     setIsOpen(!isOpen); //setting state equivalent to this.setState({ isOpen: !this.state.isOpen })
   }; 

   //function for opening the modal and calling requestHistoryOfCarPark
   const handleOpenModal = () => {
     const { parkId } = this.props; //destructuring props so you don't have to right this.props.parkId everywhere you can just call parkId
     this.requestHistoryOfCarPark(parkId, getWeek(), getTime());
     setIsOpen(true); //whenever the button is clicked always open the modal
   }; 

   render() {
     const { address, parkId, parkName, payGuide, surplusSpace, totalSpace } = this.props //destructuring props again

     return(
      //this <> empty tag is a Fragment
      <>
       <Card>
        <CardHeader>
          <Button onClick={handleOpenModal}><i className='fas fa-search' style={style}></i></Button>
          { parkId } - { parkName }
        </CardHeader>
        <CardBody>
          <div>{ address } </div>
          <div> { totalSpace } </div>
          <div> { surplusSpace } </div>
          <div> { payGuide } </div>
        </CardBody>
       </Card>
       //Put your modal under the component where you want to access it
       <Modal isOpen={isOpen} toggle={toggleModal}>
        <ModalHeader tag='h4'> Modal Heading </ModalHeader>
        <ModalBody><div id="react-c3js"></div></ModalBody>
        <ModalFooter>
          <Button color='secondary' onClick={toggleModal}>Close</Button>
        </ModalFooter>
       </Modal>
     </> 
    )
}

}

片段我将Card和Modal包裹在一个Fragment中，您可以很容易地使用<div></div>但是片段允许您具有同级组件，而无需包装HTML父级，即<div> 。 您可以在此处阅读Fragments。

建议

我知道进入一个新框架是令人兴奋的，并且您只是想深入学习，但是我强烈建议您阅读React文档 （这可能会令人生畏），并做一些教程或阅读演练指南。

希望这可以帮助。