在reactjs中使用DOM的正确或标准方法

我有两个div，我想实现的是，当我单击div left_1然后单击div

right_1

set

aria selected=true

和

right_2

set

aria selected=false

时，对于

left_2

等，同样的行为

+------------+      +-------------+ 
| div left_1 |      | div right_1 |
+------------+      +-------------+ 

+------------+      +-------------+ 
| div left_2 |      | div right_2 |
+------------+      +-------------+ 

...

DOM可以很容易地由香草JavaScript来播放，比如

document.getElementByClassName('left_1')[0].addEventListener('click', e => {
  document.getElementByClassName('right_1')[0].setAttribute('aria-selected',  true)
})

如果需要更多的编程，我们可以做

left{number}

，然后相应地更改

right{number}

的属性

我在react代码中也可以这样做，尽管react JS使用虚拟DOM，但我发现我仍然可以使用

document.getElementByClassName

或

querySelector

等来选择div。然而，我认为这不是一个正确/标准的方法

---

我的问题是，当我们需要经常操作DOM时，我们是否只需要执行多个

ref

，比如

this.left1=React.createRef（）

ref={this.left1}

this.left2=React.createRef（）

ref={this.left2}

。。。或者还有其他的方法。我对DOM部分有点不清楚。

当涉及到DOM元素选择时，使用

refs

将是正确的方法。您也可以考虑将这些位置存储在<代码>状态>代码中（取决于很多东西），并在 Reave>代码>方法中计算<代码>样式/属性/监听器< /代码>等。

当涉及DOM元素选择时，使用<代码> REFS> /代码>将是正确的方式。您也可以考虑将这些位置存储在<代码>状态>代码中（取决于很多东西），并在<代码>渲染< /COD>方法中计算<代码>样式/属性/监听器< /代码>等。

< p>我将尝试使用Reave< <代码>状态>代码>此代码>参考文献>代码>，请参阅此处。

您可以按照以下思路做一些事情：

handleClick = (e, position) => {
  this.setState({
    selected: position
  })
}

render () {
  <div name="left_1" onClick={e => this.handleClick(e, 1)}
       attribute={this.state.selected === 1}/>
  <div name="right_1" onClick={e => this.handleClick(e, 1)}
       attribute={this.state.selected === 1}/>
}

---

我会尝试使用react的

状态

来查看

参考

，请参见此处了解更多信息

您可以按照以下思路做一些事情：

handleClick = (e, position) => {
  this.setState({
    selected: position
  })
}

render () {
  <div name="left_1" onClick={e => this.handleClick(e, 1)}
       attribute={this.state.selected === 1}/>
  <div name="right_1" onClick={e => this.handleClick(e, 1)}
       attribute={this.state.selected === 1}/>
}

为什么要避免虚拟dom？@geckos。不，我不想。如果要实现这个目标，最好的方法是什么？为什么要避免虚拟dom？@geckos。不，我不想。如果要达到目标，最好的方法是什么？谢谢你的回答。如果有8个div用于

左{1,2,3,4…}

和8个

右{1,2,3,4…}

它们都需要处于

状态

，这是一个有点手工的工作。谢谢你的回答。如果有8个div用于

左{1,2,3,4…}

和8个

右{1,2,3,4…}

它们都需要处于

状态

，这是一个有点手工的工作。感谢您的回答和示例。是的，我正在寻找实现目标的正确方法，也许不需要操纵DOM？我需要一些想法。想象我有4或8个

左{1,2,3,4…}

然后如何有效地实现目标。我添加了一个带有8个div的工作示例。您可以通过修改数组来更改数字。这就是你想要的吗？谢谢你的回答和例子。是的，我正在寻找实现目标的正确方法，也许不需要操纵DOM？我需要一些想法。想象我有4或8个

左{1,2,3,4…}

然后如何有效地实现目标。我添加了一个带有8个div的工作示例。您可以通过修改数组来更改数字。这就是你要找的吗？