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

Question

• 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>

Answer 1

JSX里的{}插值里得是值，你写成() => JSX.Element相当于插值里是个函数引用，你必须调用这个函数获取到return的JSX.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函数，传给{}里的得是函数返回值而不是一个函数引用。

Answer 2

这只是一个函数，并没有运行，你需要执行它

{() => {
    ...
}}