Details of the knowledge points
1, the code format
Mathematical operators left spaces on both sides; The props data type based on the front monitor; translation; warning; variable name is the best function name; reduce unnecessary props, state; reduce unnecessary requests;
Using a code (JS-css) to avoid changing the style of other (do not add unnecessary to avoid superfluous);
End shortcut screen recording: control + command + esc
webpack memory overflow Solution: Configure
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"dev": "export NODE_ENV=development && node config/server.js --max-old-space-size=4096 --inline --progress"
},
Some common things, such as SeafileAPI, can bind to global variables. For example window.seafileAPI = seafileAPI such facilities elsewhere easily call the variables.
- Translated into Chinese: the conversion of files into po mo files.
run.sh python-env /data/dev/seahub/manage.py compilemessages
Internal docker run to run under seahub directory, you can compile it (a few minutes)
run.sh python-env /data/dev/seahub/manage.py compilemessages
2、input
1, input submit and other controlled components, click event.preventDefault need to prevent the default event (jump interface). This part of the controlled variable components can directly display the contents of the input. Here a portion of a user input may be displayed (but not alert user input interface not standardized).
handleInputChange = (event) => {
event.preventDefault();
this.setState({
value: event.target.value.toLowerCase.replace(/i/g, 'I');
});
}
After the Open dialog box, inside the input box input autofocus
JS in the conventional direct method using the focus, focus to the input box.
In React-Strap can not use the direct method, the Modal provided The autofocus seemingly useless, and so the focus obtain DOM
<Input innerRef={input => {this.newInput = input;}}/>
constructor(props) {
super(props);
this.state = {};
this.newInput = React.createRef();
}
componentDidMount() {
this.newInput.focus();
this.newInput.setSelectionRange(0, 0);
}
Doing so can make the dialog open after Focus
Enter key submissions, the need to prevent the default event
setSelectionRange can be focused from one INPUT ( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input contents of a particular selected range) element.
input.setSelectionRange(2,5);
3、CSS3
Set a pause and continue animation interface (JS Click the button to pause the animation or display)
div {
animation-play-state:paused;
animation-play-state:running;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
handleButtonClick = () => {
this.refs.div.style.animationPlayState = 'running'
}
Height Width Unit vh vw (view height width) with respect to the height and width of the viewport, ranging from 0 to 100. An element relative to the browser viewport height. Mainly used for browser compatibility issues, consistent with the width of the Google browser and the actual width of the viewport, inconsistent part of the browser and the actual width of the viewport width, so you need to set the width (when the browser zoom, image size varies);
background-size background image size represented by: may be used px /% / container / cover
PX is the absolute size,% relative to the size of the div. It represents the background covered container div, but not enough to place a black background image can be fully displayed in the div above. cover represents the background covered with div and possibly beyond, part of the background image shows incomplete. Usually cover property.
When a method in a JS component, another component of the call
if (obj) obj.method();
// 首先判断这个外部对象是否存在，然后再执行这个对象的方法(如果外部组件没有传入，这个组件不会报错)
react to transmit information is not required by state variables (make a list of state refresh content subassembly) If this is the case, there must be other places better wording, to refresh the list of subcomponents content in the parent assembly
When the asynchronous operation, the corresponding time uncertainty server, preferably plus a loading icon. Dialog box can be opened, loading state is preferably displayed in the dialog box.
react cookies Library
import cookie from 'react-cookies';
cookie.load('last_visiter')
ookie.save('view_mode', value);