在 react.js 中将数据动态绑定到 InnerHTML

Question

我有一个要求，我想将状态添加到 innerHTML。所以当状态改变时，innerHTML 里面的数据也应该改变。 这是我的代码

let div1=document.createElement("div")
div1.innerHTML=count
document.getElementById("mainDiv").appendChild(div1)

这里计数是我的状态。它正在向 div 添加初始计数，但是当计数状态发生更改时，div 内的值不会更改。如何根据我的要求使其工作

编辑

import {useEffect, useState } from "react"
import EducationForm from "./EducationForm"

const ResumeForm=()=>{
const [educationDetails,setEducationDetails]=useState([])
const [show,setShow]=useState(false)
const [index,setIndex]=useState(-1)
useEffect(()=>{
    var educationDiv=document.createElement("div")
    educationDiv.setAttribute("id","education"+1)
    document.getElementById("resume").appendChild(educationDiv)
},[])

const submitEdu=(data)=>{
    let eduTemp=educationDetails
    eduTemp.push(data)
    setEducationDetails(eduTemp)
    setShow(false)
    
        let div1=document.createElement("div")
        let div2=document.createElement("div")
        let div3=document.createElement("div")
        let editBut=document.createElement("button")

        editBut.innerHTML="EDIT"
        let index=educationDetails.length
        editBut.addEventListener("click",()=>{editEducation(index-1)})
        div1.innerHTML=educationDetails[index-1].school
        div2.innerHTML=educationDetails[index-1].qualification
        div3.innerHTML=educationDetails[index-1].specialization
        document.getElementById("education1").appendChild(div1)
        document.getElementById("education1").appendChild(div2)
        document.getElementById("education1").appendChild(div3)
        document.getElementById("education1").appendChild(editBut)


}
const editEdu=(details)=>{
    let detailsTemp=educationDetails
    alert(detailsTemp)
   let detailsTemp1= educationDetails.map(obj=>{
        if(detailsTemp.indexOf(obj)==index){
            alert("inside")
            return details
        }
        else{
            return obj
        }
    })
    alert(JSON.stringify(detailsTemp1))
    setEducationDetails(detailsTemp1)
    setShow(false)
}
const addEducation=()=>{
    setShow(true);
    setIndex(-1)
}

const editEducation=(index)=>{
   setIndex(index)
   setShow(true)
}

return(
    <>
    <div id="resumeForm">
        <button onClick={addEducation}>Add Education</button>
    
       <EducationForm show={show} time={1} onClose={()=>{setShow(false)}} details={educationDetails} index={index} submitEdu={submitEdu} editEdu={editEdu} />
    </div>
    <div className="resume" id="resume">

    </div>
    </>
)


}
export default ResumeForm

Answer 1

我假设index 是您称为count 的实际源中的状态。您可能需要添加另一个 useEffect，这取决于 index 的更改，如下所示。

useEffect(() => {
    let div1 = document.createElement("div");
    let div2 = document.createElement("div");
    let div3 = document.createElement("div");
    let editBut = document.createElement("button");

    editBut.innerHTML = "EDIT";
    let index = educationDetails.length;
    editBut.addEventListener("click", () => {
        editEducation(index - 1);
    });
    div1.innerHTML = educationDetails[index - 1].school;
    div2.innerHTML = educationDetails[index - 1].qualification;
    div3.innerHTML = educationDetails[index - 1].specialization;
    document.getElementById("education1").appendChild(div1);
    document.getElementById("education1").appendChild(div2);
    document.getElementById("education1").appendChild(div3);
    document.getElementById("education1").appendChild(editBut);
}, [index]);