最近在用antd自动生成表单时,需要生成一个select,具体效果就是根据下面的这个数据的匹配到的key来生成对应的value具体的核心代码如下:
const formItems = result.map((item, index) => (
<Col span={24 / colSpan} key={index}>
<Form.Item label={item.name}>
{getFieldDecorator(item.key, {
initialValue: item.value.toString(),
rules: [
{
required: true,
message: '配置信息不能为空',
},
{
pattern: item.regular,
message: item.message,
},
],
})(
this.test(item.key)
)}
</Form.Item>
</Col>
));
test函数具体实现,这里是通过find匹配到相同的key就返回Select
test = key => {
const foundItem = test.find(item => item.key === key);
if (foundItem) {
return foundItem.value;
} else {
return <Input />;
}
};
test数据
const test=[{key:'a',value:(<Select> </Select>)},{key:'b',value:(<Select > </Select>)}]
结果渲染到页面的时候直接就报错了:这个错误的大概原因就是:该组件的子元素格式不正确或者包含了无效的内容
我这里的错误是由于Select组件中间多了一个空格,导致它把这个空格当作Option来处理了,最后导致很逆天的错误,最后是使用了ctrl+s格式化了代码,让两个Select在不同行,成功渲染。但是如果Select在同一行并且中间是空格的话,就会出现问题
但是如果这样写换行书写,好像无论哪有空格都可以渲染,(具体区别也不清楚)
const test1 = [
{
key: 'a',
value: <Select>
</Select> },
];
总结:为了避免这种错,每次写代码使用ctrl+s格式化代码感觉是一个很好的习惯,只能说自己代码还是不够规范,导致出了这种错误。