Blog

Appearance

On this page

React项目踩坑归纳 ​

在这里插入图片描述

React踩坑 ​

安装sass ​

npm install node-sass sass-loader --save

使用scss ​

html
import  './UserInfo.scss'

export default class Login extends React.Component {
	render () {
		return (
            <div className='UserInfo'>
                demo
            </div>
		);
	}
}

遇到的问题 ​

TypeError: this.getOptions is not a function

sass-loader@11.0.0 版本需要 webpack@5.0.0 ，而 @vue/cli@4.5.0 所用的是 webpack@4，所以需要将 sass-loader的版本降到11以下

yarn remove sass-loader
yarn add sass-loader@10.1.1

关于this.props.history.listen 解绑的问题 ​

使用this.props.history.listen 监听路由变化时，在组件卸载的时候需要执行解绑操作，否则浏览器会报错

解绑的方法是：this.props.history.listen 执行会返回一个函数，通过执行这个函数就可以进行解绑

javascript
const UNLISTEN = this.props.history.listen((route) => {
     // 对应的逻辑
});

componentWillUnmount() {
  UNLISTEN && UNLISTEN(); // 执行解绑this.props.history.listen
  window.removeEventListener("resize", this.listenerResize);
}

关于通过ref获取组件的width 和 height的问题 ​

1、在使用ref 获取元素高度时 ，需要执行 this.setState({}) 更新一下页面再获取

2、或者使用定时器延迟获取

3、或者使用 Mutation Observer API 用来监视 DOM 变动

父组件如何调用子组件（子组件为函数组件）的方法 ​

useImperativeHandle: 可以自定义暴露给父组件的方法或者变量

forwardRef： 提供子组件 ref 对象

javascript
import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />
});

const App = props => {
  const fancyInputRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}

ReactDOM.render(<App />, root);

antd踩坑 ​

form 表单获取数据 ​

form表单所在组件是一个函数组件，函数组件中才能够使用 Form.useForm();

javascript
const [form] = Form.useForm();

// form.validateFields() 执行表单校验
// form.getFieldsValue() 获取到表单数据
form.validateFields().then((res) => {
            console.log(form.getFieldsValue());
            let { name, city, address, leaderIdS, remark, startAt } =
              form.getFieldsValue();
 }).catch((err) => {
    console.log(err);
 });

// form.setFieldsValue  设置表单数据
 form.setFieldsValue({
          address,
          leaderIdS,
          name,
          remark,
          city,
          startAt: newStartAt,
 });

select设置defaultValue ​

需要添加key = {defaultValue} defaultValue设置才能生效

javascript
<Select
   mode="multiple"
   allowClear
   placeholder="Please select"
   key = {defaultValue}
   defaultValue={defaultValue}
   onChange={handleChange}
   style={{ minWidth: 250}}
   maxTagCount='responsive'
 	>
 		{children}
 </Select>

给form中的select设置默认值 ​

1、通过 form.setFieldsValue() 给 Form.Item 的 name 赋值

2、name的值必须是一个字符串，假如我们是需要将id赋值给name，也需要将id的值转为字符串（如果是一个number类型的值，则会直接展示id的值，而不是展示我们期望展示的值）

javascript
// 修改的方法
modify(obj) {
  console.log(obj);
  let {  name, address, admin ,remark, id } = obj;
  let uid = []   // uid就是 Form.Item name属性绑定的值
  admin.forEach(item=>{
    uid.push(item.id + '')  // 将id转为字符串
  })
  form.setFieldsValue({
    name, address ,remark,uid
  });
}
javascript
<div>
      <Form {...formItemLayout} form={form}>
        <Form.Item
          name="uid"
          label="管理员"
          hasFeedback
          rules={[
            {
              required: true,
              message: "请选择管理员",
            },
          ]}
        >
          <Select
            mode="multiple"
            allowClear
            style={{ width: 300 }}
            placeholder="请选择管理员"
            onChange={handleChange}
            maxTagCount={3}
          >
            {children}
          </Select>
        </Form.Item>
      </Form>
    </div>
  );

粤ICP备2022128053号