如何在 ReactJS 中调用渲染内部的函数？

React 是由 Facebook 创建的 Javascript 库，用于构建更好的用户界面 (UI) Web 应用程序和移动应用程序。它是一个用于创建交互式和动态应用程序的开源库。

在本文中，我们将学习如何在 ReactJS 中调用函数进行渲染。

React 有 2 种类型的组件，即基于类和函数式组件，但渲染方法仅在基于类的组件中。所以我们将创建一个基于类的组件并在其中调用一个函数。

让我们首先创建一个 React-app

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

项目结构：它将如下所示 -

示例：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

说明：我们正在制作一个基于类的组件，即RenderFunction。在此组件中，我们将输入两个值并将其和填充到 TextField 中。这个总和是使用从渲染调用的getSum函数计算的。

Javascript

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 (
            
                

                    We will be calling sum 
                    function from render
                
                

                      
  
                    
                    


                    


  
                    
                            Get Sum
                    
                    


                    


                    
                
            
        )
    }
}
export default function App() {
    return (
        

            
        
    );
}

运行应用程序的步骤：从项目的根目录运行应用程序，使用以下命令

npm start

输出：

示例 2：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

说明：我们将通过调用 render 中的函数来切换 div 的背景颜色。

Javascript

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 (
            
                

                    {console.log(this.getBackgroundColor)}
                    
 
                        Hi Geek!!
                    
                
                


                


                
                        Change backgroundColor
                
            
        )
    }
}
  
export default function App() {
    return (
        

            
        
    );
}

输出：