我一直在尝试将此代码转换为 ReactJS 代码，但我从未使用过任何 jQuery，因此我尝试将大部分部分转换为 ReactJS，这就是我得到的:
(这是我一直在尝试转换为 ReactJS 的内容)
import React, {Component} from 'react';
import $ from "jquery";
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';
import './TestChart.css';
class TestChart extends Component{
render(){
const options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
return(
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>,
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
</div>
);
}
}
export default TestChart;
这是我不知道如何将其转换为 ReactJS 代码的 jQuery 部分:
(我想把这部分转成ReactJS代码)
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
(这是原代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
}
</script>
<style>
#showChart{
background-color: #5bb85b;
color: #ffffff;
padding: 10px;
border: 0px;
border-radius: 8px;
font-size: 18px;
outline: none;
cursor: pointer;
}
#container{
position: fixed;
top: 50%;
width:100%;
text-align: center;
margin-top: -41px;
}
</style>
</head>
<body>
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 250px; width: 100%;"></div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
最佳答案
我不会导入任何 jQuery 并做纯 React:
import React from 'react';
import './TestChart.css';
class TextChart extends React.Component {
constructor(props) {
super(props);
this.toggleDialogBox = this.toggleDialogBox.bind(this);
this.state = {
isDialogueShown: false;
}
}
toggleDialogBox(event) {
const { isDialogueShown } = this.state;
this.setState({isDialogueShown: !isDialogueShown});
}
render() {
const { isDialogueShown } = this.state;
const dialogueText = isDialogueShown ? "Click to Show Chart in a Pop-up" : "Click to Close Chart";
return (
<div>
<div id="container">
<button id="showChart" onClick={this.toggleDialogBox}>{dialogueText}</button>
</div>
<div class={`dialogBox ${isDialogueShown ? 'visible' : 'hidden'}`}>
<div id="chartContainer" class="dialog"></div>
</div>
</div>
);
}
}
这将在 css 文件中:
.dialogBox.hidden {
display: none;
}
#chartContainer.dialog {
height: 250px;
width: 100%;
}
关于javascript - 如何将此 jQuery 代码转换为 ReactJS 代码(React、jQuery、HTML、CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57152167/