-1

我有一个 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：该函数被错误地写在课堂之外。

4

3 回答 3

0

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

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

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

于 2018-02-09T13:18:16.903 回答
0

I could be wrong, but i think 

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

Is the way to go. Let me know if render(){this.renderSomething()} works.

于 2018-02-10T05:17:55.743 回答
0

也许你打算这样做？

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

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

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

于 2018-02-09T13:20:30.360 回答