javascript - react |正确使用 'parentNode'？

Question

假设我有一系列静态 div，它们创建包含少量子项的行。其中一个子级有一个点击处理程序，该处理程序应触发特定于其父级 div 的事件。该事件需要以父级 div 为目标，因为我们仅在父级中更改一些样式。

在下面的代码中，我定位每个 child 的 parentNode 的方式是否正确？ (基本上，这是最佳实践吗？)只是好奇。

谢谢!

class ClickExample  extends Component {
  handleClick = (e) => {
    const parentDiv = e.target.parentNode;
    parentDiv.classList.toggle('someClass');
  }
  render() {
    return (
      <div>
        <div>
          <h1 onClick={(e) => { this.handleClick(e) }}>Click Me!</h1>
        </div>
        <div>
          <h1 onClick={(e) => { this.handleClick(e) }}>No, Click Me!</h1>
        </div>
      </div>
    );
  }
}

export default ClickExample

Answer 1

这种方法违背了 React 哲学。您应该为此目的定义一个组件。你应该多读一点 React 哲学，但正确的方法是这样的:

class ClickableComponent extends React.Component {

    render() {
       return (
           <div onClick={this.props.onClick}>
               { this.props.children }
           </div>
       );
    }
}

class ClickExample extends React.Component {

  handleClick() {
      this.setState({
          active: null
      });
  }

  render() {
    return (
      <div>
        <div className={this.state.active === 1 ? 'someClass' : null}>
            <ClickableComponent onClick={() => this.setState({ active: 1 })}>
                ClickMe
            </ClickableComponent>            
        </div>
        <div className={this.state.active === 2 ? 'someOtherClass' : null}>
            <ClickableComponent onClick={() => this.setState({ active: 2 })}>
                No, ClickMe!
            </ClickableComponent>
          </div>
      </div>
    );
  }
}

export default ClickExample