function - force - render component react

Cómo llamar a una función dentro de un Render en React/Jsx

Question

Quiero llamar a una función dentro de un html incrustado. He intentado lo siguiente, pero la función no se llama. ¿Sería esta la forma incorrecta de llamar a una función dentro de un método de render?

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>
);
}
}

Answer 1

La solución estaba en la respuesta aceptada. Sin embargo, si alguien quiere saber por qué funcionó y por qué la implementación en la pregunta SO no funcionó,

Primero, las funciones son objetos de primera clase en JavaScript . Eso significa que son tratados como cualquier otra variable. La función puede pasarse como un argumento a otras funciones, puede ser devuelta por otra función y puede asignarse como un valor a una variable. Lea más aquí .

Así que usamos esa variable para invocar la función agregando paréntesis () al final .

Una cosa, si tiene una función que devuelve una función y solo necesita llamar a esa función devuelta, puede tener un paréntesis doble cuando llama a la función externa () ().

Answer 2

Para llamar a la función tienes que agregar ()

{this.renderIcon()}

Answer 3

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>

Depende de su necesidad, puede usar this.renderIcon() o bind this.renderIcon.bind(this)

ACTUALIZAR

Así es como llamas a un método fuera del render.

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

La forma recomendada es escribir un componente separado e importarlo.