Question

我有一个react-redux应用程序，它需要一个有条件的部分。即它可以是具有特定className的div或具有相同className的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：该函数被错误地写在课外。

Answer 1

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

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

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

Answer 2

也许你打算这样做？

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

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

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

Answer 3

我可能错了，但我认为

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

是要走的路。如果render(){this.renderSomething()}有效，请告诉我。

React jsx不向元素添加事件侦听器

3 个答案: