当我们对React的父元素设置点击事件，点击React父元素的子元素也会生效，这是正常的，但是如果我们运用传送门（ReactDom.createPortal）将React父元素的中的React子元素渲染到与父元素同级的真实dom中，此时在真实dom中父子元素不存在父子关系，但是点击子元素，依然会被父元素所捕获

App.js代码

import React, {useState} from 'react'
import ReactDom from 'react-dom'
import './App.css'
const portal=document.getElementById('portal')
function Child() {
 
  return (
    ReactDom.createPortal(<div className='child' >
      我是React子容器
   
    </div>,portal)
  )
}

function Father() {
   const[count,setCount]=useState(0)
  return (
    
    <div className='father' onClick={() => setCount(pre => pre + 1)}>
      React父容器{count}
      <Child></Child>
    </div>
  )
}

export default function App() {
  return (
    <Father></Father>
  )
}

App.css代码

.father{
  width: 500px;
  height: 200px;
  background-color: red;
}
.child{
  width: 200px;
  height: 50px;
  background-color: green;
}

html代码

 <div id="root"></div>
 <div id="portal"></div>

运行截图

第一个图可以看到Father和Child元素在React的dom中具有父子关系 第二个图可以看到Father和Child元素渲染到浏览器中，真实dom是同级的 此时点击子元素Child依然会触发父元素的click事件

记录学习中遇到的小问题 能力有限，仅凭自己学习所用，如有错误请指出，感谢!