将 HTML 脚本函数转换为 React JS

Question

In my react web, I have a script tag with functions inside shown below (like: clicking on button changing class name and so on...). I want to know how to convert the functions inside the script tag to React JS. Please Help Thank you!

/* tab */
      function tab(e, num) {
        var num = num || 0;
        var menu = $(e).children();
        var con = $(e + "_con").children();
        var select = $(menu).eq(num);

        var i = num;
        select.addClass("on");
        con.eq(num).show();

        menu.click(function () {
          if (select !== null) {
            select.removeClass("on");
            con.eq(i).hide();
          }
          select = $(this);
          i = $(this).index();

          select.addClass("on");
          con.eq(i).show();
        });
      }
/* Function */
$(function () {
        /* tab */
        tab("#tab", 0);
        tab("#tab_bg", 0);

        /* 기본 배경 click  */
        $(".btn_bg").on("click", function () {
          $(".btn_bg.on")
            .find("img")
            .attr(
              "src",
              $(".btn_bg.on")
                .find("img")
                .attr("src")
                .replace("_on.svg", "_off.svg")
            );
          $(".btn_bg").removeClass("on");

          var thisImg = $(this).find("img");
          thisImg.attr(
            "src",
            thisImg.attr("src").replace("_off.svg", "_on.svg")
          );
          $(this).addClass("on");
        });

Answer 1

as I can see your code is mostly jquery based, wich have no sense to migrate.. in any case you can refactorize your code to a react version