react项目笔记

念念ovo

已于 2023-11-07 18:05:44 修改

阅读量149

点赞数

文章标签： react.js 笔记前端

于 2023-10-25 14:55:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52827704/article/details/128863462

版权

子父组件传参

子传父

子组件
props.functionName(value)
父组件接收：
<child type="1" functionName={(val)=>console.log(val)}>  </child>

父传子直接传，例如上面type 在子组件的props接收

1.获取路由传参

 // 引入
import { useLocation } from 'react-router-dom'

const location = useLocation()

const query = getQueryVariable(decodeURI(location.search))

getQueryVariable方法：

function getQueryVariable(url)
{
  const obj = {}
  const reg = /([^?=&]+)=([^?=&]+)/g
  url.replace(reg, (...arg) => {
    obj[arg[1]] = arg[2]
  })
  return obj
}

2. ProTable 表格搜索模块默认展开：

search={{
  labelWidth: 'auto',
  defaultCollapsed: false
}}

3. ProForm自定义确定和取消按钮

配置searchConfig

 <ProForm
	 className='upload-creation-form'
	 formRef={formRef}
	 autoFocusFirstInput={false}
	 submitter={{
	   searchConfig: {
	     resetText: '取消',
	     submitText: '确认',
	   }
	   submitButtonProps: {
         loading: submitLoading,
         style: {
           // 隐藏重置按钮
           display: readonly && 'none',
         },
       },
	   // render: (props, doms) => {
	   //   return [
	   //     <Button htmlType="button" type="primary" className='btn' onClick={() => searchResList()} key="search">
	   //       查询
	   //     </Button>,
	   //   ]
	   // },
	 }}
	>
	 <ProFormText width="sm" name="relationName" placeholder="请输入名称关键字" label="关键字" />
</ProForm>