Saber2pr's Blog

DetailsOfSomePitsInAntdConstantlyUpdated

  1. DatePicker has two attributes that control its appearance, one is picker and the other is mode. If you want to change the DatePicker type dynamically, you need to change both picker and mode.
  2. Components with pop-up layers, such as Popover, Select, AutoComplete, etc., the pop-up layer Portal is hung under body by default, so it cannot match when writing css nesting. Moreover, when the upper Layout container is positioned for fixed, the pop-up layer will break away from the pop-up anchor point when scrolling. To solve these problems, they all have a getPopupContainer method to specify which dom node to hang under (with useRef). It's usually used.
  3. The dataSource of the Table component requires a key, but it does not need to manually traverse once to add the key attribute. Use rowKey.
  4. When the Modal component visible is false, the child elements are not destroyed by default (it can be understood as keep-alive by default). If a timer is used in the components in Model (such as react-use 's useInterval), you will find that when Model disappears, the timer is still running, and useEffect does not execute clean subscription. Modal provides an attribute to control whether the component is destroyed when hidden (it is recommended to set it to true): destroyOnClose, the default false.
  5. There is only one way to get the value of the uncontrolled Input component in antd, which is to use Form Field, wrap a layer of Form> Form.Item component outside, and then use form.getFieldValue to get the value of the corresponding field. Input component has no forwardRef.
  6. The width of the last item of the columns of the Table component should not be specified, and all the column.width should not add up to exactly equal to the container width, otherwise there will be enigma jitter in some browsers.
  7. By default, Item using SubMenu,SubMenu in Menu has an inline padding-left: 48pxposition, which is calculated based on level and inlineIndent. By default, inlineIndent defaults to the level (level) of Item under 24pxMenu is 2, so 24\ * 2x48. These two properties take effect only if they are set on the Menu component! Settings on SubMenu and Menu.Item don't work!
  8. If your project overrides the default style of antd in large quantities, you will definitely encounter serious CSS Layout Shift problems! A large part of the reason is that some styles of the antd component should have been set through props, but you have to use css to set, write a very complex selector or even important to improve the weight, and almost all antd components have the time difference between transition,css file requests and dom rendering, resulting in a terrible page rendering process! So the style that can be set through props must not override css. If necessary, you can set the transition that comes with the antd component to none! Especially when you need to customize its size, style, and location!
  9. Overriding the antd style will cause cls problems. If you need to customize the antd style, it is recommended to use less modifyVars. Set the style in the preprocessing stage. Refer to the relevant variables: Github.com/ant-design
  10. The default value (defaultValue) under Form.Item cannot be changed through setState! You can use useEffect to detect dependency changes and form.resetFields. If it is used in Modal, Modal needs to set forceRender.
  11. Form.Item can wrap components and automatically submit form values. Components that can be wrapped by Form.Item must provide value and onChange in props. Even if the component is controlled, the value passed in by the component onChange is submitted to the form.
  12. When the Upload component submits the file for upload, it is recommended to open the cors at the back end and send it directly. Do not write the agent yourself, especially the nodejs agent. Nodejs in the file transfer here is very crappy!