jsx常见问题

import { Input } } from 'antd';

导出的 Input是个函数，才能使用

const COMPONENT = {
    input: <Input />
}

render原理

每个 react 组件的顶部都要导入 React，因为 JSX 实际上依赖 Babel（@babel/preset-react）来对语法进行转换，最终生成React.createElemnt的嵌套语法
https://www.jianshu.com/p/8dc8e59844c9
子组件避免render https://zhuanlan.zhihu.com/p/29694166
https://blog.csdn.net/qq_32281471/article/details/96781498

valuePropName报错

Warning: React does not recognize the **valuePropName** prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase valuepropname instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React不能识别dom元素上的非标准attribute报出的警告，最终的渲染结果中React会移除这些非标准的attribute
通常 {…this.props}和 cloneElement(element, this.props)这两种写法，
会将父级别无用的attribute传递到子级的dom元素上
过滤掉 valuePropname，用 rest参数接收，删除等方法来解决

• 封装 react组件时，一定要注意，如果有不符合组件的属性，react就会报这个错误

• react文档 https://reactjs.org/warnings/unknown-prop.html

  // onChange 需要绑定 onChange，否则无法收集数据的值
  function FormItem({component, valuePropName, ...props}) {
  const Component = COMPONENT[component];
  if(!Component) return null;
  return <Component {...props} />
  }

Switch

[antd: Switch] value is not a valid prop, do you mean checked?

<Form.Item valuePropName="checked" ><Switch /></Form.Item>

Upload

Warning: [antd: Upload] value is not a valid prop, do you mean fileList?

<Form.Item valuePropName="fileList" ><Upload /></Form.Item>