React добавление обработчика только что созданным элементам

Question

Как правильно навесить обработчик на элемент, который создается в хуках?

const getInfo = () => {
    console.log('test')
};

useEffect(() => {
    let elements = `<span onClick="${() => getInfo()}">test</span>`;
    console.log(elements)
});

Так не работает.

Объясню, что я хочу в целом.

У меня рендерится страница с параграфом в котором текст. Каждое слово этого параграфа мне надо обернуть в отдельный span с обработчиком клика. Я брал абзац, разделял слова с помощью split, затем каждое слово оборачивал в span с обработчиком (как показано в примере выше) и заменял (innerHtml) содержимое параграфа на новое.

Answer 1

Можно сделать так:

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

<script type="text/babel">
  ReactDOM.render(<App />, document.getElementById('root')); 
  
  function App() {
      const text = 'Hello world!';
      
      function click(word) {
        console.log(word);
      }
      
      return <h1>{text.split(' ').map((e, i) => <span key={i} onClick={() => click(e)}>{e} </span>)}</h1>; 
  }
</script>

БЛОГ НА HUSL

React добавление обработчика только что созданным элементам

Ответы (1 шт):