React

• 站长15天前TypeScriptReact
  React中这几个常用的自定义Hook，你学会了吗？useSetState在还没有推出之前，我们写组件都是组件，在中，我们更新状态的方法是，而是会自动帮我们将多个状态进行合并处理的，什么意思呢？当我们在某个方法中使用修改数据的时候，会自动将其它不需要修改的值进行保存，后续我们用到的时候还是之前没有修改过的值，而现在在使用这个时，如果我们设置的状态是一个对象，我们还需要先将没有变化的数据重新赋值回来，这样后面才能用到，类似下面这样的：上面的伪代码是在
  • 41
  • 0
  • 0
• 站长1个月前Node.jsReact
  Next.js使用SWC按需打包ant design 4.x本文只针对Next.js中的SWC按需编译样式antdesign组件库4.x版本，5版本采用了cssinjs无需按需编译在Next.js13以后系统全面使用SWC进行编译，如果你的项目中使用了babel对antd进行按需加载打包，那么在编译时系统会默认使用babel，包括后来Next.js的打包工具以及部分实验性功能也无法使用。我在一番查找后找到了插件使用方法很简单。需要注意的是，这个插件的nex
  • 40
  • 0
  • 0
• 站长3个月前React讲解
  Next.js中使用Server Component请求数据在Next.js的更新中最大的变化就是增加了app文件夹，以及servercomponent。在新的Next.js中我们做SSR也不在需要getServerSideProps和getInitProps来在服务器请求数据，因为这两个服务器生命周期函数只能在page路由中使用，在通过状态管理来传值非常不方便。在本次更新中推出了函数。无论是组件还是路由都可以再组件内部进行服务器声明周期的fetch请求。
  • 182
  • 0
  • 1
• 站长5个月前React填坑
  react中 input中输入后自动失去焦点问题小组小伙伴开发过程中，遇到遍历input渲染在页面，再通过input框操作修改数据的过程中，出现input失去焦点问题。去帮忙排查问题的时候，起初分析是onChange方法的问题，因为项目里业务逻辑比较复杂，方法的转换有很多层级，从上到下一步步排查都没能找到原因。偶然间看到外层遍历的key值用的时间戳，再想到react的机制，便知道原因了代码示例如下：可以看到key值使用了时间戳这个时候的ke
  • 150
  • 0
  • 0
• 站长5个月前React讲解
  Next.js 13 发布了前言上周发布了Next.js的一个全新的版本13，它带来了全新的理念（servercomponent），作为一名Next.js的爱好者，我们有必要重新学习和认识下它。Turbopack首先是最引入注目的，在Next13中加入了全新的打包工具Turbopack，它是出自Webpack作者TobiasKoppers之手，官方描述是：开发时更新速度比Webpack快700倍、比Vite快10倍，是不是有
  • 206
  • 0
  • 0
• 站长6个月前讲解React
  React父组件调用子组件的方法React组件化开发中子组件可以通过传递变量或者父组件的方法来实现和父组件的通信或者调用函数传值，但是父组件如何调用子组件的方法呢？很多介绍Hooks的文章并没有讲到useImperativeHandle，我以使用React18+TypeScript开发的项目为例，组件使用Hooks。以下是我精简过后的代码。方法1父组件:父组件:子组件:方法2其实类似方法1只是接收时有一个小小的变化父组件:子组件
  • 423
  • 0
  • 0
• 站长6个月前React填坑
  Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?最近我在使用React+antd重写博客网站，在编写一个表单页面时遇到了如下报错：Warning:[antd:Upload]`value`isnotavalidprop,doyoumean`fileList`?在查找后解决方法如下：报错是因为Upload组件被嵌套在表单中造成的只需要在对应的Form.Item组件上添加valuePropName="fileList"属性就可以了但是虽然解决了初始化
  • 895
  • 0
  • 0
• 站长7个月前React
  Next.js _app.tsx使用getInitialProps在使用Next.js开发时我们通常是使用内置的SSR服务，很多网站喜欢在网站DOM挂载后再进行user_info的请求，但是次方法会使得Header的布局偏移，组件的切换很影响用户体验。所以很多时候我们会在_app组件中进行请求并使用服务器渲染。当然官方说会支持，但是在2020年就说了，2年了还是无法使用。所以我们只能是使用getInitialProps了。其实也是非常的简单，但是要注意的是，在_
  • 129
  • 0
  • 0
• 站长8个月前React填坑
  Warning: [antd: Modal] `visible` will be removed in next major version, please use `open` instead.在使用antd进行网站开发时我们遇到了这个报错，这种错误很常见通常是插件在下一个大版本准备移除或修改某些属性，所以提前放出警告信息。以免增加迁移成本。这时一般文档已经更新了我们在遇到提示时可以在文档中查询相关属性的变化即可。这是现版本的代码。根据链接显示新版本将属性改成了。修改一个属性名就可以了。
  • 866
  • 0
  • 0
• 站长8个月前React
  Tailwind CSS取消移动端优先TailwindCSS无疑是最好的CSS解决方案之一，但是他默认是移动端优先。也就是说不加"md","lg“等前缀就默认sm移动端样式，这样的配置使开发PC为主的响应式网页很麻烦。是只需要修改tailwind.config.js就可以解决。设置screens，并且不使用默认的min，设置为max即可。这样使用就可以啦，sm:hidden默认手机上组件隐藏，其他样式做用于电脑，修改为PC优先
  • 773
  • 0
  • 0