Reactjs 如何禁用React中props.children的单击事件？

如何为

道具子对象禁用任何单击事件

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

const-Example=props=>(
这可以点击
{props.children}/*无法单击这些*/
)

我正在使用渲染PDF页面，希望用户能够拖动自定义选择框（如Photoshop…）。实际上，marquee元素下方或内部的PDF页面在拖动时仍会注册鼠标事件，如文本选择。
使用CSS网格在顶部放置一个
div
！
在另一个
div
上呈现的透明
div
将拦截单击事件

CSS网格可用于（滥用？）创建单个网格区域（使用
网格模板区域
）并为其分配多个元素（使用
网格区域
）

JSX

const ClickGuard = ({allow, block}) => (
  <div className='click-guard-area'>
    <div className='click-guard-allowed'>{props.allow}</div>
    <div className='click-guard-block' />
    <div className='click-guard-blocked'>{props.block}</div>
  </div>
)

请注意，ClickGuard需要两个道具：
allow
和
block
。这些应该是JSX

您无法更改元素内的道具，因此无法更改其子道具。
另一种解决方案可能是：，
下面是一个简单的代码和平：


const-Example=props=>(
这可以点击
{props.children.map（（child）=>
反应。克隆元素（儿童{
残疾人士：对
})
)}
)
有一种简单但不可靠的方法可以做到这一点：

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

const-Example=props=>(
这可以点击
{props.children}
)

它不是健壮的，因为如果任何子项将
指针事件设置为
自动
，它们也可以单击。看看它是否适合你的需要。此外，它还将杀死
悬停
和其他鼠标事件。
您对此的用例是什么？@trixn我刚才在问题中添加了我的用例。好的，但我仍然不明白为什么这需要阻止单击事件。这看起来像是解决了一个问题，而这个问题首先是因为没有选择正确的设计。太好了！我喜欢这种方法。我用它来制作一个组件来包装可编辑元素，根据用户的权限禁用其中的一些元素。尽管有一个缺点-用户可以删除devtools中的阻塞元素。您能展示一些我们可以自己编译和运行的代码吗？这看起来很有希望，但禁用的
是否可以处理表单元素以外的元素（
按钮
，
输入
，
字段集
，等等）？可用于设置
指针事件
，可能与@JackSteam不知道一起使用，但孩子的孩子也可以设置
指针事件
，因此没有帮助。
<ClickGuard
   allow={<div>I can be clicked!</div>}
   block={<div>No clicks for me. You cannot change the props within an element thus its children props.
An alternative solution may be possible with React.cloneElement,
Here is a simple peace of code for you:




const Example = props => (
  <div>
    <div>This can be clicked</div>
    {props.children.map((child)=>
        React.cloneElement(child, {
          disabled: true
        })
    )}
  </div>
)
const Example = props => (
  <div style={{pointerEvents:'none'}}>
    <div style={{pointerEvents:'auto'}}>This can be clicked</div>
    {props.children}
  </div>
)