antd 的 Popover 组件, 在内部js 定义了Content 组件。这两种写法的区别是
写法1:<Popover content={Content} />
写法2:<Popover content={<Content />}/>
这两种写法在使用 Popover 组件时有以下差异:
写法1:
这种写法将 Content 组件作为一个函数引用传递给 Popover 组件的 content 属性。
在 Popover 内部, content 属性会被直接使用, 不会作为一个新的 React 元素渲染。
这种方式更加简洁, 但意味着 Content 组件的渲染逻辑需要在 Popover 内部定义。
写法2:
这种写法将 Content 组件作为一个 React 元素传递给 Popover 组件的 content 属性。
在 Popover 内部, content 属性会作为一个新的 React 元素渲染。
这种方式更加灵活, 可以在 Content 组件外部定义渲染逻辑, 但需要额外的 React 元素创建开销。
总的来说, 两种写法各有优缺点:
写法1更加简洁, 但 Content 组件的渲染逻辑需要在 Popover 内部定义。
写法2更加灵活, 可以在 Content 组件外部定义渲染逻辑, 但需要额外的 React 元素创建开销。
您可以根据具体的需求和场景选择合适的写法。
注意一点,也是项目中踩坑经验
当把在内部定义Content组件,同时又采用了写法2,会出现重绘bug,就如上面说的:content 属性会作为一个新的 React 元素渲染,就好像每次re-render的时候,重新初始化了content组件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。