React 更改在 DOM 中不可见答案

【问题标题】：React changes not visible in DOMReact 更改在 DOM 中不可见
【发布时间】：2017-11-14 06:11:12
【问题描述】：

我在玩 react 方面有很好的经验。但是今天我遇到了一个非常奇怪的问题。

我有一个汉堡包，它接收一个值列表，并且选择了我通过this.refs.child1.setValues() 从父级发送的值之一。这个setValues 函数调用setState 并且通过react 中的className 参数选择一个值。

所以在第一步中，我从 20 个值中选择第一个值。

react 选项卡显示了关于第一个 li 元素的信息：

className="{something} +class1"

其余所有元素都有：

className="{something}"

这很好。（'class1' 是在 setstate 上动态添加的类）并且 dom 显示第一个值已选中，其余未选中。

现在问题出在第二步，因为我选择了另一个值，比如第三个，所以第一个值应该被取消选择，第三个应该被选中，第三个的预期反应值应该是

className="{something} + class1" 其余显示className="{something}"

在反应选项卡中工作正常，但在元素选项卡中，两个 li 元素都被选中，因为它们都有 class1，但 class1 应该只与第三个元素一起使用，而不是与第一个元素一起使用（之前已选择）

【问题讨论】：

所以问题是反应选项卡和元素选项卡（DOM）与 className 参数不同步
你不用“{}”，只用{}
把Child组件的相关代码贴出来会更容易理解
@DhavalJardosh 先生，这只是一个示例，而不是确切的代码。 :)

标签： javascript reactjs

【解决方案1】：

由于 React 使用虚拟 DOM 工作，它只会在 DOM 中对它检测到更改的元素进行更改。因此，由于您实际上从未从第一个元素中删除一个类，因此它永远不会重新渲染它，它只会重新渲染第三个元素，因为这是您实际更改的唯一一个。

你需要做这样的事情：

removeClass() {
    let allLinks = document.querySelectorAll('.something');
    allLinks.map((link) => link.classList.remove('class1'));

    //and here just call the function to add the class to the right 
    //element.
}

【讨论】：

所以你的意思是如果我有一个值 className={"class1 class2"} 然后我 setState 这样 new className={"class1"} ，但它（DOM）不会改变（这正是发生了什么）。
@PalashChordia 我的意思是，如果您使用 setState 将新类添加到第三个链接，它不会从第一个链接中删除该类，因为它只会重新呈现第三个链接。因此，首先您必须从所有链接中删除该类，然后将其添加到正确的链接中，您可以使用我上面写的解决方案来做到这一点。