reactjs - 重新渲染反应中的道具变化不起作用

Question

我想重新渲染一个组件，因为我想更改 JSX HTML 我试图创建一个要重新渲染的状态，因为新的状态更改。

function todo(props) {
    
    function toggleactive(){
        
    }

    if(props.done === true){return (
        <div className={Styles.main}>
            <div className="flex items-stretch">
                <h1>{props.title}</h1>
                <button className={Styles.maxleft} onClick={() => toggleactive()}><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg></button>
            </div>

            <div className="divide-solid">

            </div>
            <div className="description">
                <p>{props.description}</p>
            </div>
            <div className="flex space-x-5 justify-end">
                <button><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg></button>
                <button><svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg></button>
            </div>
        </div>
    )}
    else{
        console.log("d")
        
    
    }
}

并在这样的数组中实现它

<div>
            <div className="wd-4/5 flex">
                <button onClick={   () => settodos([...todos,{"name":faker.name.jobType(),"title":"d"}])}> new </button><br></br>
                <button className="bg-red-600 font-normal font-sans rounded-full text-xl bg-opacity-75 p-1" onClick={() => settodos(deleterandom)}>delete random</button>

            </div>
            <div className="">
            {todos.map(function(idx,dx){
                return (<li>{todo({"name":idx.title,"description":"d","title":idx.title,"done":true,"key":uniqueId()})}</li>)
            })}
            </div>
        </div>

现在我想将代码写入切换活动函数以使用新的 props.value 变量重新渲染。

标签： reactjsjsx

Answer 1

你的意思是这样的？

    const [active, setActive] = useState(false)

    function toggleactive(){
       setActive(!active)    
    }