React onClick on div元素

Question

我在文件config.js中创建了一个Object

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>`
}