React Antd-Mobile 组件 Switch 语法问题 ?

作者站长头像
站长
· 阅读数 7
  • IDE 也没报错但是 switch 语法中的组件就是出不来 没搞懂为什么
<Form
    layout='horizontal'>
    {data.map((group) => (
        <>
            <Form.Header>{group.title}</Form.Header>
            {group.item.map((item) => (
                <Form.Item
                    label={item.name}
                    name={item.field}
                    rules={[{ required: true }]}>
                    {() => {
                        switch (item.container) {
                            case 'input':
                                console.log(item.container)
                                return <Input placeholder='请输入姓名' />
                            case 'select':
                                return <Input placeholder='请输入姓名' />
                            default:
                                console.log(item.container)

                                return <Input placeholder='请输入姓名' />
                        }
                    }}
                </Form.Item>
            ))}
        </>
    ))}
</Form>
回复
1个回答
avatar
test
2024-07-01

JSX里的{}插值里得是值,你写成() => JSX.Element相当于插值里是个函数引用,你必须调用这个函数获取到returnJSX.Element,你的代码相当于:

const renderInput = () => () => {
                        switch (item.container) {
                            case 'input':
                                console.log(item.container)
                                return <Input placeholder='请输入姓名' />
                            case 'select':
                                return <Input placeholder='请输入姓名' />
                            default:
                                console.log(item.container)

                                return <Input placeholder='请输入姓名' />
                        }
                    }
<Form
    layout='horizontal'>
    {data.map((group) => (
        <>
            <Form.Header>{group.title}</Form.Header>
            {group.item.map((item) => (
                <Form.Item
                    label={item.name}
                    name={item.field}
                    rules={[{ required: true }]}>
                    {renderInput}
                </Form.Item>
            ))}
        </>
    ))}
</Form>

你必须显式的调用这个renderInput函数,传给{}里的得是函数返回值而不是一个函数引用。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容