react组件通过props传入的组件或者组件包裹的子组件如何自定义它们的属性？

react的props是无法进行修改的，我们的自定义的组件包裹的子组件也是在props中，如何修改他们的props呢？

场景：
我们有一个列表，每一列里有一个按钮（该按钮通过props传入，可自定义按钮组件），当用户点击按钮后会把当前列的数据给到该按钮的onClick的事件中，如何实现呢？

function App2(props) {
    // 使用React.cloneElement克隆出新的元素，并且可以修改props和children内容
    // 主要就是用这个修改props属性创建新的元素，所以才实现了功能
  const aaaaa = React.cloneElement(props.children, {
      // 这里是重写了onClick的点击事件，为了符合场景，所以这是我的实现方法
      // 因为在App函数中子组件里我有设置onClick处理函数内容，
      // 那么我这里就可以当我新的组件点击后将我想传入的内容调用原来的组件props下的onClick传入进去就相当于执行了原来设hi的onClick函数了.
    onClick:(e)=>props.children.props.onClick(e,"wdawdwad")
  });
  return (
    <>
      // 渲染新的组件，这个组件将会是用户看见的组件
      {aaaaa}
    </>
  )
}
 
export default function App() {
    return (
        <>
          <App2>
        // 这个组件用户不会看见。
            <button onClick={(e,v)=>{
              console.log(e,v)
            }}>efsfesff</button>
          </App2>
        </>
    )
}

总结：

React.cloneElement是一个React API，用于复制并返回一个新的React元素，同时可以传递新的props。它的语法如下：
React.cloneElement(element, [props], [...children])

其中：
  element：要被复制的React元素。
  props（可选）：包含新prop的对象。
  children（可选）：新的子元素。