【原创】在react中使用antd-mobile中List/form组件踩的坑

3,431 阅读1分钟

ps:说句实话,antd-mobile的文档是写得真TM辣鸡,和一坨翔一样 凸(艹皿艹 )

说一下今天猜的坑, 因为需要写一个表单的功能,所以我需要用到antd-mobile的表单组件,但是antd-mobile中是没有Form这个组件但,他的form组件是需要自己通过它提供的一系列组件来拼凑,比如说List、InputItem等组件

1、先来说第一个踩的坑,List组件的坑,我们先来看antd-mobile官网的demo

来看看,它demo中使用了List.Body 组件,冉家我照着Demo写了一个简单的例子

                <List>
                    <List.Body>
                        <List.Item>
                            222
                        </List.Item>
                    </List.Body>
                </List>

结果开始报错了, Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of RegisterContent.

去翻译了一下

说是没有找到某个组件,然后我只写一个List组件是可以的,然后我使用console.dir(List),打印了一下List,惊人的发现

List组件中并没有Body这个属性,也就是说,不能使用List.Body这个组件。。但是它这个官网上的demo又用到了,刚开始我还以为是我antd-mobile里面丢包了,我重新安装了antd-mobile之后,发现还是没有Body。。所以,这个是antd-mobile的一个Bug

2、然后解决完这个问题之后,我又继续去写我的表单组件,然后发现使用这个表单属性,还得去安装一个包 rc-form ,但是它文档上根本没有说需要这个包啊

所欲说antd-mobile 是真的坑