Question

我有两个div，我想要实现的是，当我单击div left_1时，将div right_1设置为aria-selected=true，将right_2设置为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代码中这样做，尽管reactjs使用虚拟DOM，但我仍然可以使用document.getElementByClassName或querySelector等来选择DIV。但是，我认为这不是正确/标准的方法。

我的问题是，当我们需要经常操作DOM时，是否只是像Refs this.left1 = React.createRef() ref={this.left1} this.left2 = React.createRef()那样做多个ref={this.left2}。或其他方法。我对DOM部分还不清楚。

Answer 1

在state上，我会尝试使用react的refs，请在此处查看when to use refs。

您可以执行以下操作：

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}/>
}

当然，您需要为 n div添加其他逻辑。如果您愿意，我可以做一个例子。

编辑：这是一个使用 n div的示例：

class App extends React.Component {
    state = { selected: 0 }

    handleClick = (e, position, number) => {
      this.setState({
        selected: {
          position: position,
          number: number
        }
      })
    }

    render() {
    
        const divNumbers = [1,2,3,4,5,6,7,8]
        
        return (
          divNumbers.map(divNum => {
            const selected = this.state.selected.position === "left"
                             && this.state.selected.number === divNum ? "solid" : null
            return (
            <div>
              <div style={{float: "left", borderStyle: selected}} name={"left_" + divNum}
                   onClick={e => this.handleClick(e, "left", divNum)}>Left {divNum}</div>
              <div style={{float: "right", borderStyle: selected}} name={"right_" + divNum}
                   onClick={e => this.handleClick(e, "right", divNum)}>Right {divNum}</div>
              <br/><br/>
            </div>
          )})
        )
    }
}


ReactDOM.render((<App/>), document.getElementById('testing'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="testing"></div>

Answer 2

在选择DOM元素时，使用refs是正确的选择。您可能还考虑将这些位置存储在state中（取决于很多事情），并相应地在styles/attributes/listeners方法中计算render等。

在reactjs中播放DOM的正确或标准方法

2 个答案: