如何在 React 中禁用 props.children 的点击事件？

Question

如何禁用任何点击事件props.children？

const Example = props => (
  <div>
    <div>This can be clicked</div>
    {props.children} /* These can't be clicked */
  </div>
)

我正在使用react-pdf渲染PDF页面，并希望用户能够拖动自定义选择选取框（就像在Photoshop中一样......）。事实上，选取框元素下方或内部的 PDF 页面仍然会在拖动时注册鼠标事件，例如文本选择。

Answer 1

有一个简单但不可靠的方法可以做到这一点：

const Example = props => (
  <div style={{pointerEvents:'none'}}>
    <div style={{pointerEvents:'auto'}}>This can be clicked</div>
    {props.children}
  </div>
)

它并不健壮，因为如果任何子项设置pointer-events为auto，它们也将是可点击的。看看它是否符合您的需求。此外，它还会杀死hover和其他鼠标事件。