Реагировать js добавить прослушиватель событий для каждого "детей"

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;

Как я могу это сделать?

Я искал Inte rnet для ответ, но не нашел ничего подходящего. Можно ли сделать весь код в этом компоненте так, чтобы ничего не нужно было добавлять в компонент, в котором он будет использоваться?

PS извините за мой плохой engli sh))

обн.

const AnotherComponent = () =>{

    //here is a huge map function

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

У меня огромное и сложное отображение, поэтому я не могу использовать ответ @Kox`s.

и мне нужна какая-то вещь вроде l oop в «MyComponent» и добавьте событие или передайте его в качестве реквизита.

На самом деле я могу, но, думаю, это не лучшее решение

Answer 1

По какой-либо причине вы не можете присоединить слушателя к родителю (здесь: ul) и использовать target, чтобы определить, какой элемент был "наведен мышью"?

function App() {
  return (
    <MyComponent>
      <li>Bob</li>
      <li className="tab">John</li>
      <li>Sally</li>
    </MyComponent>
  );
}

function MyComponent({ children }) {
  
  function handleClick(e) {
    const { target: { offsetLeft } } = e;
    console.log(offsetLeft);
  }
  
  return (
    <ul onMouseOver={handleClick}>
      {children}
    </ul>
  );
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

ul { width: 100px; }
li:hover { background-color: #efefef; }
.tab { margin-left: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

Если вы хотите помочь своим детям, используйте 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>
    )

  }
};

Answer 3

Это похоже на хороший пример использования реквизита рендеринга (через children prop).

Пусть ваш компонент вернет это:

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

Теперь MyComponent должен принять своих потомков как функция для рендеринга:

<MyComponent>
{(onOver) => {
  // your children components now have access to onOver function
}}
</MyComponent>