如何将 html/css/js 网站的 Javascript 转换为 react 网站？

Question

我想将这个非常小的 Html/Css/Js 网站移动到一个 React 网站，我在 web 开发方面相当新，但我认为这很容易，但我遇到了一个问题，即无法将 JavaScript 复制到反应 JSX。

我怎么解决这个问题？

我想放入反应应用程序的代码笔是： https://codepen.io/aybukeceylan/pen/RwrRPoO

感谢帮助 ！

import React from "react";
import "../css/HeroSection.css";
import Photo1 from "../assets/photo_coursel1.webp";
import Photo2 from "../assets/photo_coursel2.webp";
import Photo3 from "../assets/photo_coursel3.webp";

function Home() {
  return (
    <>
      <div className="container">
        <input type="radio" name="slider" id="item-1" checked />
        <input type="radio" name="slider" id="item-2" />
        <input type="radio" name="slider" id="item-3" />
        <div className="cards">
          <div className="card" for="item-1" id="song-1">
            <img src={Photo1} alt="song" />
          </div>
          <div className="card" for="item-2" id="song-2">
            <img src={Photo2} alt="song" />
          </div>
          <div className="card" for="item-3" id="song-3">
            <img src={Photo3} alt="song" />
          </div>
        </div>
        <div className="player">
          <div className="upper-part">
            <div className="play-icon">
              <svg
                width="20"
                height="20"
                fill="#2992dc"
                stroke="#2992dc"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                className="feather feather-play"
                viewBox="0 0 24 24"
              >
                <defs />
                <path d="M5 3l14 9-14 9V3z" />
              </svg>
            </div>
            <div className="info-area" id="test">
              <label className="song-info" id="song-info-1">
                <div className="title">Bunker</div>
                <div className="sub-line">
                  <div className="subtitle">Balthazar</div>
                  <div className="time">4.05</div>
                </div>
              </label>
              <label className="song-info" id="song-info-2">
                <div className="title">Words Remain</div>
                <div className="sub-line">
                  <div className="subtitle">Moderator</div>
                  <div className="time">4.05</div>
                </div>
              </label>
              <label className="song-info" id="song-info-3">
                <div className="title">Falling Out</div>
                <div className="sub-line">
                  <div className="subtitle">Otzeki</div>
                  <div className="time">4.05</div>
                </div>
              </label>
            </div>
          </div>{" "}
          <div className="progress-bar">
            <span className="progress"></span>
          </div>
        </div>
      </div>
    </>
  );
}

export default Home;

Answer 1

我不知道 jQuery，但我会这样做：

将 onChange function 写入Home()内部但高于return()的handleOnChange = () => {...code stuff} 。 然后我会将无线电输入包装在<form>标记中，如下所示：

<form onChange=(this.handleOnChange)>
    <input type="radio" name="slider" id="item-1" checked />
    <input type="radio" name="slider" id="item-2" />
    <input type="radio" name="slider" id="item-3" />
</form> 

此外，您不需要将容器包装在 React 片段中，因为所有内容都已包装在容器中。 当您想要返回多个未包含在父元素中的元素时，片段适用。