javascript - React js为每个 "children"添加事件监听器

Question

大家好。

我有:

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;

我该怎么做？

我在网上搜索了答案，但没有找到合适的答案。是否可以将所有代码都放在这个组件中，这样使用它的组件中就不需要添加任何内容？

P.S.抱歉我的英语不好))

更新。

const AnotherComponent = () =>{

    //here is a huge map function

    let mapResult;
    return (
        <MyComponent>
            {mapResult}
        </MyComponent>
    );
}

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

我需要一些东西，比如在“MyComponent”中循环并添加事件或将其作为 Prop 传递。

实际上我可以，但我认为这不是最好的解决方案

Answer 1

如果你想将 prop 传递给你的 child ，请使用 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>
    )

  }
};