模式主体在单击按钮后不会在 html 中呈现组件

Question

我是新手。我尝试使用按钮单击以调用函数以在 html 中呈现组件。

执行后，不会显示在页面上。喜欢这个： https://i.stack.imgur.com/WoR2g.jpg

但是当我检查 html 元素 (F12( 时，react-c3js 元素包含该元素，然后它突然出现在屏幕中，如下所示： https://i.stack.imgur.com/3a7ya.jpg

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

这是我.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 >
)
}
}

这是我的网页

<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

问题

您的代码无法正常工作，因为您没有正确处理用于切换模态的 Javascript。React 是一个 Javascript 库，如果你正在使用它，请充分利用它。

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

溶液

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

在 React 中流行的两个库是Material UI或Reactstrap。

您可以在此处阅读材料UI：https://material-ui.com/。和反应在这里：https://reactstrap.github.io/

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

下面是如何在组件中使用Reactstrap的示例。

反应：模态

将Reactstrap添加到项目中。使用 npm：npm i reactstrap react-dom或使用纱线：yarn add reactstrap react-dom.我假设您也安装了引导程序，因为您使用的是引导程序类。此时您应该很高兴开始使用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>.您可以在此处阅读有关片段的信息。

建议

我知道进入一个新框架是令人兴奋的，你只想直接进入，但我强烈建议通读 React 文档(这可能令人生畏(并做一些教程或阅读演练指南。

希望这有帮助。