Javascript React js为每个“添加事件侦听器”；“儿童”；

大家好。

我有：

import React,{useState, useEffect} from 'react'

/* Styles */
import css from './MyComponent.module.sass'

const MyComponent= ({children, className, ...props}) => {
    const onOver = (e) => {
        console.log(e.target.offsetLeft);
    }

    //And here i need to add onOver function to each "children" element as onMouseOver event

    return(
        <ul className={`${css.MyComponentWrap} ${className}`}>
            <div className={css.MyComponent}></div>
            {children}
        </ul>
    );
}

export default MyComponent;

import React，{useState，useffect}来自“React”
/*风格*/
从“./MyComponent.module.sass”导入css
常量MyComponent=（{子类，类名，…props}）=>{
const onOver=（e）=>{
console.log（e.target.offsetLeft）；
}
//这里我需要将onOver函数作为onMouseOver事件添加到每个“children”元素中
返回(

{儿童}

);
}
导出默认MyComponent；

我怎么做

我在网上搜索答案，但没有找到合适的答案。 是否可以使此组件中的所有代码都不需要添加到将使用它的组件中

另外，对不起，我的英语不好

upd

const另一个组件=（）=>{
//这是一个巨大的映射函数
让地图显示结果；
返回(
{mapreult}
);
}

我有一个巨大而困难的地图，这就是为什么我不能使用@Kox的答案

我需要像“MyComponent”中的循环这样的东西，并添加事件或将其作为道具传递

---

实际上我可以，但我认为这不是一个最好的解决方案，这似乎是渲染道具（通过

儿童
道具）的一个很好的用例

让您的组件返回以下内容：

return(
  <ul className={`${css.MyComponentWrap} ${className}`}>
   <div className={css.MyComponent}></div>
   {children(onOver)}
  </ul>
);

您无法将侦听器附加到父级（此处：
ul
）并使用
target
标识哪个元素已被“鼠标覆盖”的任何原因


函数应用程序（）{
返回(
鲍勃
约翰
萨莉
);
}
函数MyComponent（{children}）{
函数handleClick（e）{
const{target:{offsetLeft}}=e；
console.log（offsetLeft）；
}
返回(

{儿童}

);
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
ul{宽度：100px；}
li：悬停{背景色：#efefef；}
.tab{左边距：1em；}
如果您想为您的孩子提供支持，请使用React.PureComponent和React.children API

class MyComponent extends React.PureComponent {
  onOver = event => {
    //do what u want with you event
  }

  render() {
    const childrenHavingOnOverFunction = 
      React.Children.map(this.props.children, child => {
         return React.cloneElement(child, { onOver: this.onOver })
      }
    );

    return (
        <ul className={`${css.MyComponentWrap} ${className}`}>
            <div className={css.MyComponent}></div>
            {childrenHavingOnOverFunction}
        </ul>
    )

  }
};

类MyComponent扩展了React.PureComponent{
onOver=事件=>{
//做你想做的事
}
render（）{
const childrenHavingOnOverFunction=
React.Children.map（this.props.Children，child=>{
返回React.cloneElement（子级，{onOver:this.onOver}）
}
);
返回(

{childrenhavingonovelfunction}

)
}
};
这是否回答了您的问题？您需要指定什么是
子项
，并提供您尝试过的内容far@streletss见upd。@Abdullah Abid更新了。不过，你的问题在我看来是重复的。在
MyComponent
内部，而不是
{children}
只需执行
{React.children.map（children，child=>React.cloneElement（child，{onMouseOver:onOver}））}
正确。。。那临时方法呢？这对你的案子有利吗？
<MyComponent>
{(onOver) => {
  // your children components now have access to onOver function
}}
</MyComponent>

class MyComponent extends React.PureComponent {
  onOver = event => {
    //do what u want with you event
  }

  render() {
    const childrenHavingOnOverFunction = 
      React.Children.map(this.props.children, child => {
         return React.cloneElement(child, { onOver: this.onOver })
      }
    );

    return (
        <ul className={`${css.MyComponentWrap} ${className}`}>
            <div className={css.MyComponent}></div>
            {childrenHavingOnOverFunction}
        </ul>
    )

  }
};