react如何省略号_react 踩坑记

预览权限不能编辑

项目中是个图,如果控制里面的节点很麻烦,那么久想办法遮罩,最简单的方式就是使用伪类,但是伪类用js是不好控制的,那么就多加减class去处理

className={classnames(`${this.prefix}main-section-wrapper`, {

withafter: !editable

})}

>

{this.renderMainSection()}

css

&main-section-wrapper {

position: relative;

}

&main-section-wrapper.withafter:after {

content: " ";

width: 100%;

height: 100%;

position: absolute;

top: 0;

z-index: 10;

left: 0;

}

这样就达到了遮罩的目的

key 真的很关键

列表页 有搜索 可以删除每一个item,搜索是antd form getFieldDecorator 那么每次输入字符 list组件都会刷新,但是我们每个item并不需要刷新

rednerAppItems = (list = [], isPublished) => {

return list.map((item, idx) => (

key={idx}

data={item}

/>

));

};

一开始我使用数组的idx作为可以赋给每个item的key,但是这样在删除的时候,后面的一个item的key就变成了被删除的item的key,react比较认为哪个被删除的item还存在,后面的item的内容就变成了被删除的那条item的内容,所以需要唯一的key,而不是数组的idx,后来做了调整,使用uuid/v4,生成唯一的key给每个item,但是我是这么操作的:

rednerAppItems = (list = [], isPublished) => {

return list.map((item, idx) => (

key={uuid()}

data={item}

/>

));

};

这样每次输入字符到search box,key都是不同的,这样react就认为改item是个新的节点, 每个item都会重新加载,就是走了componentDidMount,这开销就大了,导致我输入卡顿,体验极差,又重新切换到数组的idx,这样搜索的时候不会再走componentDidMount,但是会走shouldComponentUpdate,输入也有些卡顿,依然会render,那么就需要在shouldComponentUpdate做判断,数据没更新,就不需要render,

shouldComponentUpdate(nextProps, nextState) {

if (data === this.props.data) {

return false;

}

return true;

}

针对第一点解决办法是在list的元素中放置一个uuid,绑定到item的key上,这样就不再卡顿,key真的很重要,

不写shouldComponentUpdate且key是list中的uuid,代码依然走componentDidUpdate,不是太理解,因为我的数据和key都没有变,react的diff算法应该判断dom是没有更新的,就不应该走render去update节点,这点不是很理解,list是托管在redux-ui的,reudx-ui使用了immutable.js 不知道每次数据不变但是appitem update是不是跟这个有关系

父组件state更新,在三个组件没有传入props的情况下,Component组件,函数组件都会更新,PureComponent组件不会更新,PureComponent是react 16.4.1用shallowEqual做了浅比较

但是出现个疑问,输入字符进行搜索的时候或者删除操作后,会走componentDidMount,这个时候list数量改变了,虽然每个key没变,但是list数量变了,每个item就会重新装载

同一个路由组件,路由变化,重新渲染

项目分为未发布和已发布状态,点击已发布需要跳转到已发布的界面,但是他们共用一个组件,只是路由的query string 不同,发布后请求的接口也是不同的,并且接口请求是在componentDidMount钩子里,在Route在加上实时的key就行了

path="/editApp"

exact

component={EditApp}

key={new Date().getTime()}

/>

上面结果尝试失败,key是活的话,路由组件componentDidMount会执行两次

后面尝试了

listenLocation = () => {

this.unlisten = this.props.history.listen(({ pathname, search }) => {

// 拉取已发布数据

});

};

componentWillUnmount() {

this.unlisten();

}

html5 拖拽在Firefox中不生效

在chrome下拖拽完全没没问题的,但是在Firefox下挂了

handleDragStart = (src, dragItem) => e => {

e.dataTransfer.setData("txt", "xxx"); //加入这行代码在Firefox下就可以拖拽了

this.tabLabel = src;

this.dragItem = dragItem;

};

query-string 在crea-react-app 无法build

解决办法就是使用 ljharb/

高阶组件 复制原组件的静态方法到新组件

属性代理的方式返回新的组件的render函数中是要渲染原组件的

return class extends React.Component {

static displayName = `Model(${getDisplayName(WrappedComponent)})`;

render() {

return ;

}

};

还有一种方式:

return class extends React.Component {

static displayName = `Model(${getDisplayName(WrappedComponent)})`;

render() {

return React.createElement(WrapperComponent, this.props);

// return ;

}

};

渲染的是原组件的元素,react-redux就是采用第二种方式

addExtraProps(props) {

if (!withRef && !renderCountProp && !(this.propsMode && this.subscription)) return props

// make a shallow copy so that fields added don't leak to the original selector.

// this is especially important for 'ref' since that's a reference back to the component

// instance. a singleton memoized selector would then be holding a reference to the

// instance, preventing the instance from being garbage collected, and that would be bad

const withExtras = { ...props }

if (withRef) withExtras.ref = this.setWrappedInstance

if (renderCountProp) withExtras[renderCountProp] = this.renderCount++

if (this.propsMode && this.subscription) withExtras[subscriptionKey] = this.subscription

return withExtras

}

render() {

if (this.state.error) {

throw this.state.error

} else {

return createElement(WrappedComponent, this.addExtraProps(this.state.props))

}

}

原本以为cloneElement也可以实现,查阅文档发现cloneElement只能根据元素clone出元素,而createElement是根据给定的类型创建并返回新的 React element,不可以是一个元素,二者区别参见

axios 会将arguments对象转为字符串

arguments是关键字

{

arguments:{

name:"xxx"

}

}

axios 就会将上面的转化为:

{arguments:"{"name":"xxx"}"}

目前的解决办法是service.interceptors.request.use再转回来

antd Dropdown placement多个空格会报错

getPopupContainer={() => document.getElementById(appId)}

placement="bottomRight "

overlay={

{editable && (

{t("app..clone")}

)}

{deletable && (

{t("app..delete")}

)}

}

>

鼠标悬浮就会报错:

报错

关于异步请求loading效果

并不是所有的异步请求都要加loading,大部分是需要的,loading效果用的是antd Spin组件

vscode(version 1.25.1) import jsx 无法转到定义(go to definition)

jsconfig.json:

{

"compilerOptions": {

"jsx": "react"

}

}

vscode(version 1.25.1) import 绝对路径 无法转到定义(go to definition)

最好的办法是在项目根目录下加上jsconfig.json,然后配置

{

"compilerOptions": {

"experimentalDecorators": true,

"emitDecoratorMetadata": true,

"jsx": "react",

"baseUrl": ".",

"paths": {

"*": ["./src/*"]

}

}

}

{

"path-intellisense.mappings": {

"/": "${workspaceRoot}",

"lib": "${workspaceRoot}/lib",

"global": "/Users/dummy/globalLibs"

},

}

在create-react-app中使用绝对路径

在项目根目录的.env文件中加上NODE_PATH=src/,然后src目录下的文件相互引用就不需要加上../../这么长的字符串了,比如

import modelConnect from "../../components/common/modelConnect";

// 下面这样直接引入就行了

import modelConnect from "components/common/modelConnect";

并且输入components,vscode还有自动提示,贼六

eject后按需加载antd

package.json

"devDependencies": {

"babel-plugin-import": "^1.8.0",

"babel-plugin-transform-decorators-legacy": "^1.3.5",

"less": "^3.8.1",

"less-loader": "^4.1.0"

},

"babel": {

"presets": [

"react-app"

],

"plugins": [

"transform-decorators-legacy",

[

"import",

{

"libraryName": "antd",

"libraryDirectory": "es",

"style": "css"

}

]

]

},

使用table的时候报了个错

*./node_modules/antd/es/spin/style/index.css

Module build failed:

/* autoprefixer: off /

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);

^

Unrecognised input

in d:\work\uumsx.web\node_modules\antd\es\spin\style\index.css (line 99, column 63)

用lint-staged检测更改的代码,限制提交

"eslintConfig": {

"extends": "react-app",

"rules": {

"no-console": [

"warn",

{

"allow": [

"warn",

"error"

]

}

]

}

},

配置eslint不让src下有console.log,但是在配置好后,每次提交有console的代码lint-staged跑都会通过,原来lint-staged只会捕获报错的信息,warning就会通过,尝试把warn改为error,但是项目就直接报错,跑不起来,所以这种方式不行

"rules": {

"no-console": [

"error",

{

"allow": [

"warn",

"error"

]

}

]

}

然后搜了下

--max-warnings can serve this purpose: --max-warnings=0 means that any warnings cause eslint to report an error.

--strict for counting warnings as errors

"scripts": {

"start": "node scripts/start.js",

"build": "node scripts/build.js",

"test": "node scripts/test.js --env=jsdom",

"precommit": "lint-staged",

"lint": "eslint --max-warnings 0 src"

},

"eslintConfig": {

"extends": "react-app",

"rules": {

"no-console": [

"warn",

{

"allow": [

"warn",

"error"

]

}

]

}

},

"lint-staged": {

"*.js": [

"npm run lint",

"git add"

]

},

这样的话执行npm run linteslint就会报错,就会被lint-staged捕获到

eslint报错

输入校验 debounce

一开始

import { debounce } from "lodash";

onWidgetChange = field => e => {

debounce(this.checkUserName, 500);

};

然而并不能实现500ms内连续输入不调用接口,而是change触发了几次,就调用了几次接口,原因是:debounce只执行一次,执行后的函数作为事件处理函数

onNameChange = debounce(this.checkUserName, 500);

原生标签可以传入children

antd的table可编辑行的代码

const EditableRow = ({ form, index, ...props }) => (

);

乍看一脸懵逼,props里包含children居然在tr里渲染出来了,写测试代码

export default class Parent extends React.Component {

render() {

return (

xxx

children={

geek jin

}

/>

);

}

}

原生标签的children属性

是有作用的

高阶组件传递ref

想拿到最里层组件的引用还是修改高阶组件的代码,所以第三方的高阶组件一般都会提供withRef参数去拿被包裹的组件,比如 react-i18next

子组件

import { translate } from "react-i18next";

@translate("", { withRef: true })

export default class CepModal extends React.Component {}

父组件

let cepRef = React.createRef();

function onCepLinkClick(e) {

const cepModalInstance = cepRef.current.getWrappedInstance();

cepModalInstance.showModal();

}

function CustomDefaultTemplate(props) {

return

}

antd Menu 里的MenuItem 不能被高阶组件包裹

通过render props的方式统一管理antd modal的状态

{this.renderSavePointListModal(

({ handleClick, ...restProps }) => (

 savepoint list

)

)}

renderSavePointListModal = MenuItem => {

const {

ui: { savePointList }

} = this.props;

return (

{(

{ visible, restProps, show, hide } // 将Menu传递过来的props重新传递到MenuItem

) => (

visible={visible}

hide={hide}

savePointList={savePointList}

deleteSavePoint={this.handleDeleteSavePoint}

/>

)}

);

};

ModalContainer.js

export default class ModalContainer extends React.Component {

state = {

visible: false

};

show = () => {

this.setState({ visible: true });

};

hide = () => {

this.setState({ visible: false });

};

toggle = () => {

this.setState(({ visible }) => ({ visible: !visible }));

};

render() {

const { visible } = this.state;

const { children, ...restProps } = this.props;

console.info(children);

return children({

visible,

show: this.show,

hide: this.hide,

toggle: this.toggle,

restProps

});

}

}

但是在SavePointListModal中删除一个条目后savePointList减少了一个。ModalContainer的render方法并没有被调用,原来是antd官方不支持在MenuItem外包裹组件,只能直接用。

antd的解释

antd form setFieldsValue 无法触发定义在getFieldDecorator中的validator函数

手动触发请调用 validateFields

StrictMode 下 render会执行两次

import React, { useState, useEffect } from "react";

import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {

render() {

return (

会死循环吗?

;

);

}

}

const Child = ({ style }) => {

const [localStyle, setLocalStyle] = useState();

useWhatChanged([style]);

useEffect(() => {

console.info("inner");

setLocalStyle(style);

}, [style]);

console.info("xxxx", style);

return "children";

};

export default Parent;

做一次setState操作会render两次,是react StrictMode故意在开发模式下这么设计的

import React from "react";

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(

,

rootElement

);

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。官方解释

React.lazy 代码分割 报错

[email protected]

react 官网例子

import React, { Suspense, lazy } from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));

const About = lazy(() => import('./routes/About'));

const App = () => (

Loading...

}>

);

我这么用了以后报了个错:Failed prop type: Invalid prop component of type object supplied to Route, expected function.

解决办法:使用render函数传递function Failed prop type: Invalid prop component of type object supplied to Route, expected function

// imports here

...

const Decks = React.lazy(() => import('./pages/Decks'));

...

class App extends Component {

...

render() {

return (

}>

} />

...

);

}

...

}

antd table 长列 显示省略号

[email protected] 还没有ellipse属性

.ant-table-row-level-0 td:nth-child(5) {

max-width: 26vw;

word-break: break-all;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

你可能感兴趣的:(react如何省略号)