Реагировать на клик по элементу div

Question

Я создал один объект в файле config.js

export const handleClick =() => {
   return "hi"
}

export const abc = {
  'a': 'rollNo',
  'b': 'age',
  'c': `<div onClick='${handleClick}'>Click 
       Me</div>`
}

Я перебираю объект в таблице и значения печатаются в таблице.

Когда я нажимаю на div,ничего не происходит. Событие onClick не запускается в реакции.

Может кто-нибудь подсказать, в чем проблема

Answer 1

Компонент React не может храниться в строках, вместо этого создайте функцию-стрелку, которая возвращает элемент JSX:

export const handleClick =() => {
   return "hi"
}

export const abc = {
  'a': 'rollNo',
  'b': 'age',
  'c': () => <div onClick={handleClick}>Click Me</div>
}

Затем вам придется вызывать его, когда вам нужно что-то отобразить, то же самое относится и кдругие ваши строки, если они должны вести себя одинаково:

export const handleClick =() => {
   return "hi"
}

export const abc = {
  'a': () => 'rollNo',
  'b': () => 'age',
  'c': () => <div onClick={handleClick}>Click Me</div>
}

Рабочий пример:

class App extends React.Component {

    render() {
        const handleClick = () => { console.log('hi !') }

        const abc = {
            'a': () => 'rollNo',
            'b': () => 'age',
            'c': () => < div onClick={handleClick}> Click Me </div>
        }

        return (
            <div> {abc.c()} </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('react')
)

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

Answer 2

Попробуйте

export const abc = {
  'a': 'rollNo',
  'b': 'age',
  'c': `<div onClick={${handleClick}}>Click 
   Me</div>`
}