react开发过关斩将的积累【暂停更新】

最新推荐文章于 2022-12-23 16:20:09 发布

置顶 WOLO.7

最新推荐文章于 2022-12-23 16:20:09 发布

阅读量1k

点赞数 4

分类专栏： react 文章标签： react 前端

本文链接：https://blog.csdn.net/qq_44345059/article/details/107213663

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档旨在积累react开发过程中遇到的问题及解决办法

搭载环境、路径等问题

搭建初期，页面报错如下

GET http://translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20200506_00 net::ERR_CONNEC......

*解决方法：关闭谷歌翻译，不再对本页面翻译即可（虽然这个解决方案我也挺奇怪的，但是确实就这么解决了）

在app.js里写路由跳转路径中，通常写法：<Route path='/home' component={Home}/>

path：网页路由  
component：jsx文件中class名（首字母大写）

通常在vscode控制台打开执行npm start后会加载出一个界面地址http://localhost:3000/#/，这时候可能你的界面是空的，而你希望显示的是http://localhost:3000/#/home的界面
*解决方法：app.js文件中需要加一句<Route path='/' component={Home} exact />，使得一加载出就渲染home界面。

样式加载出错或者未显示等问题

如果出现有less无法显示之内的代码无效果的情况可以检查一下package是否安装了相关（刚开始写install就是万能处理方法，因为往往是因为没有install导致一些no found之类的报错）
今天引用antd的样式显示不出来，网上查了一些修改方法都没有成功，有些是文件不一致，有些是修改的部分我的代码中版本不一导致有些无法进行修改。
我成功的解决方案是在文件的开头加这句代码import 'antd/dist/antd.min.css'; antd的样式就可以显示出来了。
有些antd自带样式和自己字定义的一些样式出现冲突，想用自己的覆盖有时候可以尝试调整样式的优先级来完成，例如height: 60px !important;
相关css/important可参考此文
通常先写导航栏和最顶部的logo部分时需要注意，写完可以将页面缩小试着检查一下，常遇到问题有
- 导航栏滑动超过了logo —— logo部分检查有没有设置样式fixed，去掉即可
- 部分宽高出现问题 —— 检查是否设定了100%，宽度设为100%可以实现自适应，可以随着页面的缩放来自动调整，高度通常不好设置，可以给页面设置最小高度minHeight，侧边导航栏设置为height:100%就可以自动填充
antd里layout样式下可嵌套 Header Sider Content Footer 或 Layout 本身，其中在文件开头引用他们时，如果遇到样式不对的情况可以试一下是不是加大括号的原因，我遇到有Content不加大括号引用const Content = Layout;就不会显示效果，正确写法：const { Content } = Layout;，但奇怪的是在引用Sider的时候加了大括号反而不对了，总之可以注意一下这个点
如果有一些组件的样式不知道怎么调试，可以在页面上打开控制台，找到对应组件的css/less样式，直接在网页上改样式，改好直接将那一段复制到自己的css/less文件里就可以覆盖原来的样式了，也可以先拿下来再改。总之，用组件的属性值来改就可以覆盖原来样式了，自己定义往往不可改变

写法问题（封装、布局、导航栏等）

关于封装：通常私下的小项目最常见的是把共有的的部分做个封装大家共同开发的时候就可以方便的调用，当然在大项目中封装程度更高会更便于代码的管理和使用。下面是一个简单的封装逻辑：
- 封装的代码通常在类似components 文件夹中，具体的部分会分不同的文件夹下写，本例组件的文件目录结构如下：components —— headerfooter —— header
- header.jsx 文件里我封装了一个Head组件（注意组件首字母大写），写的是如下图的header，特别注意组件里这句话export default class Head extends React.Component { 一定不要忘了 export default ，否则组件不能被展示。另外组件的封装的写法就和单独写一个部分在页面上是一致的，该引用的还需要引用。
- 本例中需要引用组件的文件home.jsx写法：前面需要先应用组件import Head from "../../components/headerfooter/header"; 引用的组件名Head，from后面写的是组件所在文件的相对路径。在后面的代码中引用方法如下：

 render() {
      return(
        <div>
          <Head />  //引用组件
           </div>
      );
  }

导航栏react+antd例子(自己写的一个demo)
关于antd里的layout自己调整的布局
- 具体案例参考官网layout的介绍
- layout几个组成部分介绍：
  - Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
  - Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  - Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
  - Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  - Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
- 官网上根据以上几个元素的布局有以下例子：
  我在项目中引用的样式是如下，可以看作是最后一个基础上把Header放到了最顶上去，然后导航栏、顶上的标题条、右边的内容框以及底下的页脚都是大家公用的，只需要在Content里填充需要展示的页面内容及样式即可，layout 元素的组合方式还有很多，大家可以根据自己的需求合理的搭配组装