React jsx没有向元素添加事件监听器答案

【问题标题】：React jsx not adding event listener to the elementReact jsx没有向元素添加事件监听器
【发布时间】：2018-02-09 13:02:26
【问题描述】：

我有一个 react-redux 应用程序，它需要一个有条件的部分。即它可以是具有特定类名的 div 或具有相同类名的 div 和触发操作的 onClick 处理程序。所以我创建了一个根据上述条件返回 jsx 的函数。现在的问题是 onClick 没有像我预期的那样被添加到道具中，但 className 工作正常。

class someClass {
    renderSomething(){
         return <div className="someClass" onClick={() => 
    this.props.someAction()}>Something</div>
}
   render(){
        {this.renderSomething()}
   } 
}

我的预期是这样的

<div className="someclass" onClick={() => this.props.someAction()}>Something</div>

Rect 开发工具显示什么

<div className="someclass">Something</div>

不知道哪里出错了。

编辑1：函数被错误地写在类之外。

【问题讨论】：

onClass=()=>???这是笔误吗？
您的“最小、完整和可验证的示例”既不完整也不可验证（renderSomething 应该是类组件 someClass 中的一个方法，应该扩展 React.Component，没有条件渲染为你说的，有些错别字...）

标签： javascript reactjs react-redux react-props

【解决方案1】：

你有一个错字。在您的 renderSomething() 方法中，您应该具有以下内容：

renderSomething() {
  return (
    <div className="someclass" onClick={this.props.someAction}>Something</div>
  );
}

编辑： 现在我看到 renderSomething 不是类的一部分，因为它是从中调用的。为了保持对this 的引用，您必须将其移动到您的类中，从而使其成为类方法。如果你想给 someAction 函数添加一个参数，我建议你给你的 React 组件添加一个事件处理程序，然后将它分配给一个 onClick。在渲染方法中使用箭头函数会导致每次组件重新渲染时都会在内存中创建一个新函数。

【讨论】：

【解决方案2】：

也许你打算这样做？

class someClass {
    renderSomething(){
        return <div className="someClass" onClick={() => this.props.someAction()}>Something</div>
    }   

    render(){
        {this.renderSomething()}
    } 
}

在您的原始示例中，renderSomething 不是 someClass 的一部分——因此调用 this.renderSomething() 会引发运行时错误。

【讨论】：

【解决方案3】：

我可能错了，但我认为

render(){
     return {this.renderSomething()}
}

是要走的路。让我知道render(){this.renderSomething()} 是否有效。

【讨论】：