React Antd-Mobile 组件 Switch 语法问题 ?
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个回答
test
2024-07-01
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
函数,传给{}
里的得是函数返回值而不是一个函数引用。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容