以下代码是用<Form></Form>
包裹的子组件中的render部分的代码:
可以看到Input.TextArea
被<div>
包裹住了,这会导致无法被Form表单识别并抓取,因为Form默认只允许放一个子元素。
<div className={styles.textAreaWrap}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><div style={{ marginTop: 8 }}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></div></Form.Item>
</div>
这时候我们应该增加一个noStyle
属性给Form.Item
标签,并且移动div
到Form.Item
标签之外,noStyle
的效果就是可以忽略Form.Item
的样式,起到和内部放置div一样的效果,可以认为noStyle
=<></>
<div className={styles.textAreaWrap}><div style={{ marginTop: 8 }}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></Form.Item></div>
</div>