- React.Children.map(this.props.children, () => { …… })
- 改变state不使用push方法而是setState
- ES6语法
const props = { ...this.props };
- 组件自定义背景，在父组件位置设置style属性，然后在子组件里面继承style属性；
- setState是异步的，不会马上更新state。setState有callback函数
- react-router的onEnter设置路由权限
- 当前地址：
Location
跳转页面：useNavigate
- 使用div模拟textarea：属性
contentEditable="plaintext-only"与onInput={this.emitChange}，this.inputRef.innerHTML获取输入内容。
1
2
3
4
5
6
7
| <div
className="input_content"
onInput={this.inputChange}
contentEditable="plaintext-only"
ref={(inp) => { this.inputRef = inp }}
onKeyDown={this.onKeyDown}
/>
|
新版ref写法ref={this.inputRef}
状态提升
你一定听说过变量提升，函数提升，那么状态提升是什么呢？
首先你得了解双向绑定和单向数据流，双向绑定中，数据可以在不同的组件之间实现共享，这样做的确有很大的好处，但是在react中，不推荐使用双向绑定，而是使用状态提升的方式。
状态提升：state推崇单向数据流，数据从父组件通过props流向子组件，如果你在子组件中，需要修改state来和其他子组件共享数据更新，你需要使用回调函数给使数据更新给父组件，然后从父组件流向其他的子组件，这样做是保证数据有单一的来源。
如果子组件和子组件之间任意共享数据，那么，后期维护会比较痛苦，特别是找bug的时候。
看一个状态提升的例子吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| class Child extends React.Component {
constructor(props) {
super(props);
}
handleChange = (e) => {
this.props.upDateValue(e.target.value);
}
render() {
const {name, value} = this.props;
return (
<div>
<p>{name}：</p>
<input
value={value}
onChange={this.handleChange}
/>
</div>
);
}
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {value: '', name: ''};
}
upDateValue = (value) => {
this.setState({value: value})
}
render() {
const {value} = this.state;
return (
<div>
<Child name="组件1" value={value} upDateValue={this.upDateValue} />
<Child name="组件2" value={value} upDateValue={this.upDateValue} />
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('root')
);
- 传递属性给子组件
const childrenWithProps = React.Children.map(this.props.children,
child => React.cloneElement(child, {
equityRate: this.publishTasks,
}),
);
|
this.context
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //在父组件中包含方法
getChildContext() {
return {
USER: this.state.USER,
};
}
Parent.childContextTypes = {
USER: PropTypes.object,
};
//在子组件中
Child.contextTypes = {
USER: PropTypes.object,
};
constructor(props, context)
|