踩坑记录: React、Next踩坑记录

·  阅读 21

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第18天,点击查看活动详情

React踩坑记录

  1. 组件命名首字母大写

  2. useEffect

  3. window调用报错:

解决方法:my.oschina.net/tearlight/b…

  1. 插槽子组件的形式

{React.Children.map(children, (child, index) => {

return

  • {

    React.cloneElement(child, {

    index: index,

    isSingle: children.length > 0 ? false : true,

    chargeMode:child.props.chargeMode

    })

    }

  • })}

    1. ts默认值:

    let { blockType,children } = props

    children 返回值 undefined 只有一个就是对象;多个就是数组;直接map循环就要判断类型,用React.children就不用判断类型了

    interface Options{
    
    title?: string | ReactNode ,
    
    subTitle?:string | ReactNode,
    
    chargeMode?: string , //activied disabled
    
    isSingle?:Boolean
    
    }
    
    
    
    
    const initProps = {
    
    title: '调用次数计费' ,
    
    subTitle:'购买资源包可以抵扣当月及之后产生的调用量。',
    
    chargeMode: '',
    
    isSingle:true
    
    }
    
    let { title,subTitle,isSingle } = Object.assign(initProps,props)
    复制代码
    1. Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16

    同设置windows一样,设置全局index.d.ts

    import * as React from 'react';
    
    
    
    interface Window {
    
    seajs:any,
    
    __billingSdk:any
    
    }
    
    
    declare module 'react' {
    
    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    
    // extends React's HTMLAttributes
    
    hotrep?: string;
    
    }
    
    }
    
    复制代码
    1. react中set的值立马去拿拿不到

    2. function无状态组件不能使用生命周期,有时候感觉很麻烦

    3. JSON.stringify(res, null, 2)

    加参数就可以把json对象转换成页面可以直接展示的了

    Next踩坑记录

    参考资料:

    别人的踩坑笔记

    1. next 首屏渲染会不会闪一下(有的客户端和服务端会调用两次

    2. react dom的hydrate可以解决ssr的问题

    3. ssr的一些问题,好处,坏处

    为什么要用ssr

    Next 使用

    一、安装:

    
    npm init
    
    npm install --save next react react-dom
    
    npm run dev 运行
    
    复制代码
    
    { "scripts": { "dev": "next -p 2333", "build": "next build", "start": "next start" } }
    
    复制代码

    启动成功,不需要配置路由,pages下会自动生成路由;静态文件在static下,很方便

    层级嵌套的文件就是路由嵌套关系了

    路由跳转只支持query

    二、配置css

    
    const withCss = require('@zeit/next-css');
    
    module.exports = withCss({
    
    cssModules: false,
    
    cssLoaderOptions: {
    
    importLoaders: 1,
    
    localIdentName: '[local]___[hash:base64:5]',
    
    },
    
    });
    
    复制代码

    三、目录优化

    pages 座位路由索引目录,所以组件放在components下,以不同page区分,抽离公共组件,组件名称和组件配置调用名称一致

    因为是pc和移动端的项目在一起,所以区分了pc和mobile的组件,分别放在对应的目录下

    四、其他语法

    Link

    import Link from 'next/link';

    
    <Link href='/'> <img className='logo' alt='logo' src='/static/logo.png' /></Link>
    
    复制代码
    分类:
    前端
    标签:
    收藏成功!
    已添加到「」, 点击更改