以下代码是用<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>