携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情
React踩坑记录
-
组件命名首字母大写
-
useEffect
-
window调用报错：
解决方法：my.oschina.net/tearlight/b…
- 插槽子组件的形式
{React.Children.map(children, (child, index) => {
return
{
React.cloneElement(child, {
index: index,
isSingle: children.length > 0 ? false : true,
chargeMode:child.props.chargeMode
})
}
})}
- 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)
同设置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;
}
}
-
react中set的值立马去拿拿不到
-
function无状态组件不能使用生命周期，有时候感觉很麻烦
-
JSON.stringify(res, null, 2)
加参数就可以把json对象转换成页面可以直接展示的了
Next踩坑记录
参考资料：
-
next 首屏渲染会不会闪一下（有的客户端和服务端会调用两次
-
react dom的hydrate可以解决ssr的问题
-
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>
