如何將此jQuery代碼轉換為ReactJS代碼（React，jQuery，HTML，CSS）

Question

我一直在嘗試將此代碼轉換為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;

這是jQuery部分，我不知道如何將其轉換為ReactJS代碼：

（我想把這部分轉換成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>

Answer 1

我不會導入任何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%;
}

如何將此jQuery代碼轉換為ReactJS代碼（React，jQuery，HTML，CSS）

問題描述

1 個解決方案

解決方案1
3 2019-10-04 21:04:06

如何將此jQuery代碼轉換為ReactJS代碼（React，jQuery，HTML，CSS）

問題描述

1 個解決方案

解決方案1 3 2019-10-04 21:04:06

解決方案1
3 2019-10-04 21:04:06