对 div 元素做出反应答案

【问题标题】：React onClick on div element对 div 元素做出反应
【发布时间】：2018-12-17 19:11:25
【问题描述】：

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

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

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

我正在遍历表中的对象，值打印在表中。

当我点击 div 时，什么都没有发生。onClick 事件不会在反应中触发。

谁能告诉我是什么问题

【问题讨论】：

删除 ${handleClick} 周围的 '' 并在 handleClick 中执行 console.log。
@MayankShukla 我厌倦了删除''。但是我得到错误参考错误：输入意外结束{
试试这个：<div onClick={${handleClick}}>
当我这样做时，我收到错误未捕获语法错误：输入意外结束

标签： reactjs ecmascript-6 redux

【解决方案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>

【讨论】：

为什么你的 onClick 处理程序是字符串文字？
不知道，起初在OP的帖子中没有注意到这个错误
通过这样做 export const abc = { 'a': 'rollNo', 'b': 'age', 'c': () =>
单击我
} 'react/display-name 中缺少错误组件
@Treycos 我正在这样做 import * as config from 'one.js';
然后只需导入并使用它，而不是像我一样将其放入局部变量中。如果需要，abc 和 handleclick 可以在课堂之外

【解决方案2】：

试试

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

【讨论】：

当我这样做时，我收到错误未捕获语法错误：输入意外结束
你能证明你是如何在代码中使用它的吗？回答会更有帮助。
我正在做这样的事情 import * as config from 'one.js';然后创建组件 .. 代码 sn-p 是 return Object.keys(config).map((key,index) return ( )
请为您的回答提供一些背景信息。