React中MaterialTable组件Toolbar赋值方式导致的渲染异常问题咨询

问题现象 #

当通过以下两种方式自定义MaterialTable的Toolbar组件时：

<MaterialTable components={{ Toolbar: props => <CustomToolbar {...props} /> }} />

或是：

<MaterialTable components={{ Toolbar: props => CustomToolbar(props) }} />

会出现下拉菜单（点击表格选中行后的右上角按钮弹出的菜单）定位到页面左上角的问题；而直接赋值组件的方式则正常：

<MaterialTable components={{ Toolbar: CustomToolbar }} />

问题原因 #

这两种函数包裹的方式，本质是每次渲染时都创建了一个全新的匿名组件。MaterialTable内部的下拉菜单组件（基于Material-UI的Menu实现）需要依赖锚点按钮的DOM引用来计算定位位置，新组件的创建会破坏原有上下文和DOM引用的传递，导致菜单无法找到正确的锚点，只能使用默认的左上角定位。

解决方案 #

方案1：直接传递组件本身（推荐） #

优先使用直接赋值组件的方式，确保组件引用稳定，上下文和DOM引用能正确传递：

<MaterialTable components={{ Toolbar: CustomToolbar }} />

方案2：若需额外传参，用React.memo包裹匿名组件 #

如果必须给CustomToolbar传递额外参数，不要直接写匿名函数，而是用React.memo包裹，保证组件引用的稳定性：

import React from 'react';

// 包裹后组件引用不会每次渲染都变化
const StyledToolbar = React.memo(props => (
  <CustomToolbar {...props} extraParam={yourExtraValue} />
));

// 使用时传递StyledToolbar
<MaterialTable components={{ Toolbar: StyledToolbar }} />

或者也可以将额外参数的逻辑整合到CustomToolbar内部，通过MaterialTable的options或其他props传递，避免外层包裹匿名函数。

内容的提问来源于stack exchange，提问作者Fappaz