在父组件上拖动文件时如何设置子组件的样式

Question

我有一个简单的组件结构

  <Parent>
    <SomeComponent />
    <AnotherComponent />
    <DragNDropFile />
  </Parent>

DragNDropFile是用于在放置区中放置文件的组件。

当我在其上拖动文件时，我了解如何设置该组件的样式。 很简单，只需使用this.state.dragging添加类

    handleDragEnter = (e) => { //DragNDropFile method
      e.preventDefault();
      e.stopPropagation();
      this.dragCounter++;

      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
        this.setState({dragging: true});
      }
    }

  handleDragLeave = (e) => {//DragNDropFile method
    e.preventDefault();
    e.stopPropagation();
    this.dragCounter--;
    if (this.dragCounter > 0) return;

    this.setState({dragging: false});
  }

但是当我在父组件上拖动文件时，如何对DragNDropFile组件设置不同的样式？

我试图在父组件上进行dragEnter和dragLeave，但是只有它们在没有子组件的方法的情况下才能工作。

我也不喜欢在不用于删除文件的组件上的dragenter处理程序中跟踪event.target的想法。

也许我错了。

建议您的想法。