React Antd 关于下拉框，日期选择器的bug

image.png

想在下面这个布局中用上上面的下拉框和一些日期选择，为了让这个界面能够复用，就想着，直接把值和标签传进去

image.png

const row = [
  [
    {
      label: "123",
      ele: ,
      id: "asdf",
      message: "asdfsadf"
    },
    {
      label: "123",
      ele: (
         
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          Jack
          Lucy
          Tom
        
      ),
      id: "asdf",
      message: "asdfsadf"
    }
  ]
]

然后在自己写的组件里面map循环这个数组，然后展开来，直接塞入item.ele作为标签渲染就好了，就能自定义里面的标签了，但是这样子出了个bug，界面能出来，但是点击之后直接整个页面报错
很多很多错误
TypeError: value.format is not a function
或者
Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {_isAMomentObject, _isUTC, _pf, _locale, _d, _isValid}). If you meant to render a collection of children, use an array instead.

image.png

image.png

解决的方法是把这些元素用div或者Fragment包裹起来

{
      label: "123",
      ele: (
    
         
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          Jack
          Lucy
          Tom
        
    
      ),
      id: "asdf",
      message: "asdfsadf"
    }

或者，这些antd的标签，不要用相同的id 即可