React Ant Design Mobile中List与Form组件踩坑指南

前端

2023-10-25 18:14:28

Ant Design Mobile：List和Form组件的踩坑指南

List 组件

列表项类型错误

在 List 组件中，Item 组件仅接受字符串或 React 组件作为其子元素。尝试嵌套其他类型的数据（如数组、对象或函数）会导致错误。

列表项高度不一致

List 组件的 Item 组件没有内置高度属性。如果列表项的高度不一致，会出现排列不整齐的问题。可以使用 CSS 样式设置 Item 组件的高度，或使用 Flex 布局确保列表项高度一致。

列表滚动性能不佳

包含大量数据的 List 组件可能会出现滚动性能不佳的问题。可以使用虚拟列表技术提高滚动性能。Ant Design Mobile 库中提供了 VirtualList 组件，可替代 List 组件实现虚拟列表。

代码示例：

// 使用虚拟列表优化 List 组件的滚动性能
import { VirtualList } from '@ant-design/react-native';

const App = () => {
  const data = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  return (
    <VirtualList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

export default App;

Form 组件

表单项类型错误

与 List 组件类似，Form 组件的 Item 组件也只接受字符串或 React 组件作为其子元素。嵌套其他类型的数据会导致错误。

表单项校验规则不生效

Form 组件的 Item 组件提供校验规则属性，用于验证表单项值是否符合规则。如果校验规则不生效，可能是因为规则写法有误，或表单项值类型与校验规则不匹配。

表单项初始值不显示

Form 组件的 Item 组件提供 initialValue 属性，用于设置表单项的初始值。如果初始值不显示，可能是因为初始值的数据类型与表单项的类型不匹配，或表单项的 disabled 属性设置为 true。

表单项禁用状态不生效

Form 组件的 Item 组件提供 disabled 属性，用于禁用表单项。如果禁用状态不生效，可能是因为 disabled 属性的值不是布尔值，或表单项的 readOnly 属性也设置为 true。

表单项焦点状态不生效

Form 组件的 Item 组件提供 autoFocus 属性，用于设置表单项的焦点状态。如果焦点状态不生效，可能是因为 autoFocus 属性的值不是布尔值，或表单项的 disabled 属性也设置为 true。

代码示例：

// 验证表单项值
import { Form, Input } from '@ant-design/react-native';

const App = () => {
  const [form] = Form.useForm();

  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form
      form={form}
      onFinish={onSubmit}
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="用户名" />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input type="password" placeholder="密码" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;