关于使用react在render函数内部声明箭头函数提示not defined问题

最新推荐文章于 2023-03-29 14:52:37 发布
最新推荐文章于 2023-03-29 14:52:37 发布
阅读量1k 收藏 1
点赞数
文章标签： react.js javascript 前端 render函数里面声明函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47531829/article/details/123294251
版权

今天写页面的时候，要布局这个页面，想着把其在render函数里面处理成一个函数

一开始我是这样写的， 结果在编译的时候出现了报错，

 于是，我就想在render里面不能声明函数了吗，那不对啊，我明明记得之前就可以在render函数里面声明函数啊，于是我就搜了一下问题，在这篇文章中，react组件里面的render函数外面与render函数里面的区别

这里说在render函数里面必须加上function,我就按照这篇文章说的去做了，于是，后来就改成这样了， 

最后，编译的时候没有报错，完美运行了。这个时候我就想，function声明的函数和箭头函数不是一样的嘛，为什么用function就可以被声明，而用箭头函数没有声明。等一下，没有声明？是不是因为我用箭头函数的时候没有用let var const等关键字声明这是一个函数啊，于是，我在箭头函数前面加了一个const,变成了这样，

编译的时候也没报错，完美运行了。render函数里面也并不是必须要用function声明函数，用箭头函数也可以，不过箭头函数前面要加关键字，来说明，声明的是一个函数 

A &......
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
我在使用 Taro 时遇到的问题(2)
eswang的CSDN博客
12-26 1801
前言 小程序还是不得不捡起来地说。。。 Taro还是最合适的说。。。 默认模板中app.jsx的一些问题 关于taro框架，通过脚手架初始化时，生成的文件目录如下： 注意的是，components文件夹是我后来生成的，我们需要注意的是app.jsx的内容： import Taro, { Component } from "@tarojs/taro"; import Home from "./pa...
深入理解React中何时使用箭头函数
08-29
对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常，特别是React中箭头函数使用这块，下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料，需要的朋友可以参考借鉴，下面随着...
学习React前端框架，报错 'render' is not defined no-undef
aqfgbq6813的博客
11-13 2634
报错'render' is not defined no-undef原因没有 写import { render } from 'react-dom' 转载于:https://www.cnblogs.com/BensonHai/p/9952076.html
react 方法未定义_React JS中的未定义对象
weixin_39580682的博客
12-22 315
I'm getting the following error:Uncaught ReferenceError: videos2 is not definedIn this app:class App extends Component {constructor(props) {super(props)this.state = {videos2:[],selectedVideo:null}this...
react 用Mobx的时候，要触发componentwillreact必须要在render里面有用到该变量
zhumengzj的博客
10-26 2946
探索在 JS 中，为什么要在函数前面加
宋宋的博客
03-29 646
从测试结果的截图中我们能大致的看到，（IIFE）方式，比运算符快的是一个级别（进一位数的速度），如果说立即执行（）的时间复杂度是O(n)，那么运算符就是O(10n)，当然这也只是粗略的测试，而且在现有的浏览器解析速度，时间基数小到可以忽略不计，所以看个人需求，写法就是萝卜白菜，大家各有所好，看个人。赋值，逻辑，甚至是逗号，各种操作符，只要是解析器支持且用来识别的特殊符号都可以用作消除歧义的方式方法，而!那么也就是说，括号的作用，就是将一个函数声明，让解析器识别为一个表达式，最后由程序执行这个函数。
浅谈箭头函数写法在ReactJs中的使用
10-19
主要介绍了浅谈箭头函数写法在ReactJs中的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React踩坑日记（1）- 箭头函数后面的大括号带还是不带呢？
01-07
一、用箭头函数写了一个遍历组件的方法 今天copy的时候发现了一个问题，代码如下： /** * @Description: * @param {e} 数组 * @param {Panel} const { Panel } = Collapse; antd的折叠面板组件 */ showPanel = e...
react中使用G2图表踩到的坑
赵又又的博客
10-30 1万+
最近在写有图表的页面，饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。 比较好上手，官方文档也写的清清楚楚，只是踩了个小小的坑。 按照官方文档写下来，设置了图表的宽度自适应。然而页面在刚开始刷新的时候，canvas超出了屏幕的宽度，如果改变浏览器的大小，forceFit: true这个属性会自适应屏幕的宽度，这时图表的大小是正常的。 询问大神可能是G2在计算屏幕宽度的...
react避免子组件渲染_如何与React一起使用正确的方法来避免一些常见的陷阱
cumi7754的博客
07-27 922
react避免子组件渲染Photo by Alexander Sinn / Unsplash 亚历山大·辛恩 ( Alexander Sinn)摄影/ Unsplash One thing I hear quite often is “Let’s go for Redux” in our new React app. It helps you scale, and the App data sho...
风尚云网学react-React的一些疑惑及解答
01-25 891
风尚云网学react-React的一些疑惑及解答
React开发中常见报错之组件更新错误
coder__wang的博客
07-25 863
在React开发中，这样的报错会经常遇到：Warning: Can't perform a React state update on an unmounted component.
第五章 在React中如何定义组件
天界程序员的博客
02-14 1019
了解react定义组件的两种方式：函数式组件和类式组件，以及他们之间的区别做一些总结
React函数组件和类组件生命周期比较
bigb的博客
09-12 1045
React 函数组件和类组件生命周期之间的类比。
Web全栈开发学习笔记—Part1 React入门—d.深入React 应用调试
旭日东歌
12-29 232
Complex state 【复杂状态】 之前的示例，应用状态很简单，因为它仅由单个整数组成。 如果需要一个更复杂的状态，最简单和最好的方法是多次使用 useState 函数来创建单独的状态“片段”。 在下面的代码中，我们为应用创建了两个名为 left 和 right 的初始值为0的状态: const App = () => { const [left, setLeft] = useState(0) const [right, setRight] = useState(0) r
vue报错：is not defined on the instance but referenced during render.
热门推荐
ting119的博客
07-19 4万+
练习 Vue 自定义事件 v-model ，代码如下： <template> <div> <base-checkbox v-model="lovingVue"></base-checkbox> </div> </template> <script> import
ReferenceError: React is not defined报错解决方案
刻痕
01-19 7471
ReferenceError: React is not defined报错解决方案。npm run eject 暴露项目配置项，会删除babel的配置项。需要手动加回来
如果你对 React Component 一知半解，那么请看这篇文章!
萍果吮雨的博客
11-17 243
文章目录一、笔者述 :二、React 组件优化的两种思路 :1. 使用 `React.Component` 来构建 React 组件，通过 `shouldComponentUpdate` 钩子来进行优化-1). 优化前 :-2). 优化后 :方案一 : 浅比较方案二 : 深比较2. 使用 `React.PrueComponent` 来构建 React 组件，默认自带优化效果三、总述 : 一、笔者述...
react 生命挂钩_这不是您祖母的React：挂钩如何重写您对组件的理解
weixin_26738395的博客
08-27 425
react 生命挂钩Anyone who’s spent some time with React has seen its evolution from classes to functions, yet the documentation hasn’t caught up. It still describes component lifecycle in class terms, and i...
react中一个函数内部的变量如何在函数外使用
最新发布
06-09
在 React 中，如果你想在一个函数内部定义的变量在函数外部使用，你需要将这个变量的作用域提升到函数外部，可以通过两种方式来实现： 1. 将变量定义在函数外部 在函数外部定义一个变量，然后在函数内部赋值即可。这样定义的变量就可以在函数外部使用了。 示例代码： ```javascript let myVar; function myFunction() { myVar = 'Hello World'; } myFunction(); console.log(myVar); // 输出：Hello World ``` 2. 使用 React Hooks 中的 `useState` 方法 使用 `useState` 方法可以在函数组件中定义一个状态变量，并且将其作用域扩展到整个组件。这样就可以在组件内部的任意地方使用这个变量了，包括函数内部。 示例代码： ```javascript import React, { useState } from 'react'; function MyComponent() { const [myVar, setMyVar] = useState(''); function myFunction() { setMyVar('Hello World'); } myFunction(); console.log(myVar); // 输出：Hello World return <div>{myVar}</div>; } export default MyComponent; ``` 使用 `useState` 方法时需要注意，每次调用 `setMyVar` 方法都会重新渲染组件，因此在函数内部频繁调用会导致性能问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值