react开发记录

工作是用vue，私人项目用react开发，以学习记录

• react路由懒加载 （lazy, Suspense结合使用，单用lazy会报错）

import { lazy, Suspense } from 'react'
impot Loding from './components/Loading'

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))

//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<Loding/>}>
	<Switch>
        <Route path="/xxx" component={Xxxx}/>
        <Redirect to="/login"/>
	</Switch>
</Suspense>

• [email protected]后的form表单控件使用绑定数组/对象值
  详细参考文章
  name={['imgUrl', index]} 这样绑定是对应 imgUrl[index]

// imgUrl: ['1111', '2222']
<Form.List name="imgUrl"  >
    {(fields) => (
        <>
            {fields.map((field, index) => (
                <Form.Item
                    {...field}
                    label={"项目图片" + index}
                    name={['imgUrl', index]}
                    key={field.key}
                >
                    <Input.Group compact>
                        <Input style={{ width: 'calc(100% - 100px)' }} onChange={(e) => {
                            form.getFieldValue('imgUrl')[index] = e.target.value;
                        }} />
                        <Button style={{ width: '50px' }} icon={<MinusOutlined />} />
                        <Button style={{ width: '50px' }} icon={<PlusOutlined />} />
                    </Input.Group>
                </Form.Item>
            ))}
        </>
    )}
</Form.List>

• 父组件通过ref调用子组件，需要子组件将方法暴露

  //子组件将需要的方法暴露出ref
    useImperativeHandle(ref, () => ({
        open,
    }));