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

不能将响应组件存储在字符串中，而是使用箭头函数返回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>`
}

对onClick on div元素做出反应

2 个答案: