箭头函数中的组件重新渲染

Posted 2023-03-10

【中文标题】箭头函数中的组件重新渲染

【英文标题】：Component re-rendering in arrow functions

【发布时间】：2021-07-25 18:13:47

【问题描述】：

我有一个箭头功能来切换 div 并根据 div 设置一个按钮来显示或隐藏。

    toggleDeliveryDiv = () => 
        document.getElementById('btn_collapse_delivery').click(); 
        this.setState(deliveryShow: !this.state.deliveryShow)
        
        var styl = document.getElementById("plusDiv")
     
            if(this.state.deliveryShow)
                styl.style.display = 'block'
            else
                styl.style.display = 'none'
            
    

我在 onClick 事件中调用箭头函数，如下所示：

onClick=this.toggleDeliveryDiv

但是我猜该方法要么被调用两次，要么组件由于 setState 调用而被重新渲染。请问我怎样才能防止箭头函数中的重新渲染，或者我怎样才能更好地实现这一点？？？

【问题讨论】：

你不应该在 react 中主动操作 DOM（除非在非常特殊的极端情况下），你应该依靠 this.state 来改变可见性。

我的用例剥夺了我依赖状态来改变可见性的能力，因为它总是创建一个新实例并导致多个元素具有相同的 id 错误

【参考方案1】：

您可以使用“this.state.deliveryShow”来更改 div 元素的样式，而不是操作 DOM。这样您就不必手动处理它了。

<div id="plusDiv" style=display:this.state.deliveryShow?'block':'none'></div>

【讨论】：

这两种方法仍然会导致重新渲染或多个函数调用

我已经相应地编辑了答案。让我知道它现在是否有效。

谢谢。虽然我在使用状态来控制样式时仍然遇到同样的问题。所以我试图隐藏或显示的按钮是动态添加额外表单组件的添加按钮。当前，当单击按钮时，会添加额外的组件，但也会切换整个 div。添加方法：``` addChild = (e) => let objId = e.target.id;让 objName = "文本"+objId; e.target.id = Number(objId) + 1 var objCom = this.state.componentList.concat(id:objId,name:objName,booleane:true) this.setState( componentList: objCom ) 跨度>

【参考方案2】：

应该是这样的： onClick=this.toggleDeliveryDiv 要么 onClick=()=>this.toggleDeliveryDiv()