如何使用 React 选择兄弟元素？答案

【问题标题】：How to select sibling element with React?如何使用 React 选择兄弟元素？
【发布时间】：2021-07-02 22:36:11
【问题描述】：

反应组件

import React, {useState} from 'react';
import './CounterButton.css';

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            event.target.classList.toggle('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
        
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p>{currentCount}</p>
        </div>
    );
};

export default CounterButton;

此组件的外部样式表

.count-container {
  display: flex;
  padding: 10px;
}

.count-container > button {
  width: 50px;
  margin: 0 10px;
}

.bound-hit {
  color: red;
}

我有一个反应组件和该组件的样式表。在这种情况下，它将类bound-hit 切换到按钮的类列表。我可以使用event.target 选择按钮，但我想将此类切换到我的div 中的<p></p> 标签。我的问题是如何使用事件选择该 p 标签。 p 标签就像按钮的兄弟。类 count-container 的 div 是父级。我也可以通过event.target.parent 选择父 div，但我想选择 p 标签并将bound-hit 切换到那个.. 我该怎么做？

【问题讨论】：

标签： javascript css reactjs dom

【解决方案1】：

我认为您在这里不需要特定于 React 的答案。

在vanilla JS中你可以使用nextElementSibling method。

const handleClick = (event) => {
  const p = event.target.nextElementSibling
}

或者您可以使用adjacent sibling combinator 来在 CSS 中。

.bound-hit + p {
  // apply styles to the <p> that's just after .bound-hit in the DOM
}

但是，如果您“手动”在 react 组件中添加一个类（这意味着该类被添加到 DOM 中而没有任何状态表示），一些 virtual DOM reconciliations 可能最终会删除它。

在很多情况下，这不会是一个问题，但如果是，那么你应该为它使用一个状态。这是一个简化的示例：

const [pClass, setPClass] = useState('')
const handleClick = () => {
  setPClass('bound-hit')
}

return (
  <p className={pClass} />
)

【讨论】：

【解决方案2】：

问题不应该是“如何选择同级”，而是“如何在 [condition] 上将 CSS 类分配给 P 元素”。

如果 React 组件直接拥有（子）元素的所有权，您可以使用 className 简单地更改组件状态并将其应用于元素的类列表。

在组件中进行任何 DOM 操作/遍历主要是使用 React 的错误形式，并且会使解决方案过于复杂。

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    const [currentClass, setCurrentClass] = useState();
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            setCurrentClass('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p className={currentClass}>{currentCount}</p>
        </div>
    );
};

【讨论】：