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。

您可以在https://material-ui.com/上的Material UI上阅读。还有Reactstrap：https://reactstrap.github.io/

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

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

Restraps：模态

将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包裹在一个片段中，您可以像使用<div></div>一样容易，但是片段允许您拥有同级组件而无需需要包装HTML父级，即<div>。您可以阅读片段here。

建议

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

希望这会有所帮助。

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

1 个答案:

问题

解决方案

Restraps：模态

建议