React onClick on div元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React onClick on div元素相关的知识，希望对你有一定的参考价值。
我在文件config.js中创建了一个Object
export const handleClick =() => {
return "hi"
}
export const abc = {
'a': 'rollNo',
'b': 'age',
'c': `<div onClick='${handleClick}'>Click
Me</div>`
}
我正在迭代表中的对象，并在表中打印值。
当我点击div时，没有任何反应.onClick事件没有反应。
任何人都可以告诉我们这个问题
答案
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>另一答案
尝试
export const abc = {
'a': 'rollNo',
'b': 'age',
'c': `<div onClick={${handleClick}}>Click
Me</div>`
}
以上是关于React onClick on div元素的主要内容，如果未能解决你的问题，请参考以下文章