React项目笔记

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        '/api1',
        createProxyMiddleware({
            target: '<http://localhost:5000>',
            changeOrigin: true,
        })
    )
}

<Route path="/" render={()=>
    localStorage.getItem("token")?
    <MainPage ></MainPage>:
    <Redirect to="/login"/>
}/>

<Redirect from="/" to="home" exact></Redirect>
<Route path={"*"} component={NoMatch}></Route>

const selectKeys = [props.location.pathname]
const openKeys = ["/" + props.location.pathname.split("/")[1]]

<Menu selectedKeys={selectKeys} defaultOpenKeys={openKeys}>
   {renderMenu(menu)}
</Menu>

<input ref="input1"/>

<input ref={(c)=>{this.input1 = c}}/>

myRef = React.createRef() 
<input ref={this.myRef}/>

setTimeout(() => {
	this.setState({isModal: true})
	this.formRef.current.setFieldsValue(item)
}, 0)

.voltage {
		float: right;
		position: relative;//位置相对于正常位置
		bottom: 43px;
		right: 40px;
}

<Item>...</Item>
<a className={styles.voltage} onClick={this.autoCompleteThresholdDown}>
		Item外面的a
</a>
<Item>...</Item>

[1, 2, 3].toString() // '1, 2, 3'
[1].toString() // '1'

/**
以下方式访问会报错: key是*类型但什么什么*类型不行, 总之无法通过map[key]进行访问
TEST_MAP = {
		[key1]: name1,
		[key2]: name2,
}
TEST_MAP[key1]
**/

// 解决方案1
getKeyValue = <T extends object, U extends keyof T>(obj: T, key: U): T[U] => obj[key]

// 解决方案2 (大佬写法)
export const PARAM_UNIT_TYPE_MAP: Record<string, {name: string}> = {
    [PARAM_UNIT_TYPE_SPEED]: {name: '速度均方根'},
    [PARAM_UNIT_TYPE_VIB]: {name: '振动加速度'},
    [PARAM_UNIT_TYPE_TEM]: {name: '温度'},
}

<Col span={%d}></Col>
//%d为在24栅格中所占用的格数

// 第一种
<Modal
	{..props}
>
{nodeChildren}
</Modal>
//--------------------------
// 第二种
{isModal && (
	<Modal
		{..props}
	>
	{nodeChildren}
	</Modal>
)}