¿Cómo llamar a la función dentro del renderizado en ReactJS?

React es una biblioteca de Javascript que fue creada por Facebook para crear mejores aplicaciones web y aplicaciones móviles de interfaz de usuario (UI). Es una biblioteca de código abierto para crear aplicaciones interactivas y dinámicas.

En este artículo, aprenderemos cómo llamar a una función para renderizar en ReactJS.

React tiene 2 tipos de componentes, es decir, componentes funcionales y basados ​​en clases, pero el método de renderizado solo está en componentes basados ​​en clases. Así que haremos un componente basado en clase y llamaremos a una función en eso.

Primero creemos una aplicación React

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Estructura del proyecto: se verá así :

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. 

Explicación: Estamos creando un componente basado en clases, es decir, RenderFunction. En este componente, ingresaremos dos valores y completaremos su suma en TextField. Esta suma se calcula utilizando la función getSum que se llama desde render.

import React from 'react'
import TextField from '@mui/material/TextField';
class RenderFunction extends React.Component {
    constructor() {
        super();
        this.state = {
            answer: "Answer"
        }
        this.getSum = this.getSum.bind(this)
    }
  
    getSum() {
        var x = parseInt(document
            .getElementById("elementA").value);
  
        var y = parseInt(document
            .getElementById("elementB").value);
  
        console.log(x + y)
        this.setState({
            answer: x + y
        })
    }
  
    render() {
        return (
            <center>
                <h1>
                    We will be calling sum 
                    function from render
                </h1>
                <div>
                    <TextField id="elementA" 
                        variant="outlined" />  
  
                    <TextField id="elementB" 
                        variant="outlined" />
                    <br></br>
                    <br></br>
  
                    <button onClick={this.getSum} 
                        className="btn btn-primary">
                            Get Sum
                    </button>
                    <br></br>
                    <br></br>
                    <TextField id="elementC" disabled 
                        variant="outlined" 
                        value={this.state.answer} />
                </div>
            </center>
        )
    }
}
export default function App() {
    return (
        <div className="App">
            <RenderFunction />
        </div>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando

npm start

Producción:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

Explicación: Alternaremos el color de fondo del div llamando a una función desde render.

import React from "react";
import TextField from '@mui/material/TextField';
class RenderFunction2 extends React.Component {
    constructor() {
        super();
        this.state = {
            bool: true,
            bgColor: 'green'
        }
        this.getBackgroundColor = 
            this.getBackgroundColor.bind(this)
    }
  
    getBackgroundColor() {
        console.log("hihi")
        if (this.state.bool == true) {
            this.setState({
                bool: false,
                bgColor: 'red'
            })
  
        } else {
            this.setState(
                {
                    bool: true,
                    bgColor: 'green'
                }
            )
        }
    }
  
    render() {
        return (
            <center>
                <div style={{ 
                    backgroundColor: this.state.bgColor 
                }}>
                    {console.log(this.getBackgroundColor)}
                    <h1 style={{ color: 'white' }}> 
                        Hi Geek!!
                    </h1>
                </div>
                <br></br>
                <br></br>
                <button onClick={this.getBackgroundColor} 
                    className="btn btn-danger">
                        Change backgroundColor
                </button>
            </center>
        )
    }
}
  
export default function App() {
    return (
        <div className="App">
            <RenderFunction2 />
        </div>
    );
}

Producción: