How to Call a Function inside a Render in React/Jsx

问题

I want to call a function inside some embedded html. I tried the following but the function isn't called. Would this be the incorrect way of calling a function inside a render method?

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

回答1:

To call the function you have to add ()

{this.renderIcon()}

回答2:

class App extends React.Component {
  
  buttonClick(){
    console.log("came here")
    
  }
  
  subComponent() {
    return (<div>Hello World</div>);
  }
  
  render() {
    return ( 
      <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
          {this.subComponent()}
       </div>
     )
  }
  


}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

it depends on your need, u can use either this.renderIcon() or bind this.renderIcon.bind(this)

UPDATE

This is how you call a method outside the render.

buttonClick(){
    console.log("came here")
}

render() {
   return (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

The recommended way is to write a separate component and import it.

回答3:

The fix was at the accepted answer. Yet if someone wants to know why it worked and why the implementation in the SO question didn't work,

First, functions are first class objects in JavaScript. That means they are treated like any other variable. Function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. Read more here.

So we use that variable to invoke the function by adding parentheses () at the end.

One thing, If you have a function that returns a funtion and you just need to call that returned function, you can just have double paranthesis when you call the outer function ()().

来源：https://stackoverflow.com/questions/40298136/how-to-call-a-function-inside-a-render-in-react-jsx

标签

javascript

reactjs

function

render

jsx