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

Question

I have a react-redux app which requires a part which is conditional. ie it can either be a div with a certain className or a div with the same className and an onClick handler which fires an action. so I created a function which returns jsx according to the above conditions. Now the problem is that the onClick is not being added to the props as I expected but className is working fine.

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

What I expected it to be

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

What Rect dev tools show

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

Don't know where I went wrong.

Edit 1: The function was mistakenly written outside the class.

Answer 1

You have a typo. In your renderSomething() method, you should have the following:

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

EDIT: Now I saw that renderSomething was not a part of class from it was called from. In order to keep reference to this , you have to move it inside of your class, hence make it class method. If you wish to add an argument to someAction function, I suggest you add a event handler to your React component, and then assign it to a onClick. Using arrow function in render method causes creation of a new function in memory every time component re-renders.

Answer 2

Maybe you meant to do this?

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

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

In your original example, renderSomething wasn't a part of someClass -- so calling this.renderSomething() would have thrown a runtime error.

Answer 3

I could be wrong, but i think

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

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