如果让每项 MenuItem 宽度往外撑，那么恐怕会很长，而我们希望尽可能短，少占用空间。
若改成每项 MenuItem 宽度往内缩，width=‘fit-content’，那么右边的 ”快捷键文本“ 就不会右对齐，字少的会更短。
这种需求描述就是，默认宽度内缩，但是短的需要补齐最长的那个。
现在的代码是：
return (
<div className={menuItemMergeStyle + " " + className} style={{ ...style }}>
{menuContext.hasCheckmark && checkMarkNode}
{menuContext.hasIcon && iconNode}
{contentNode}
{shortcutNode}
{menuContext.hasSubmenu && submenuIndicatorNode}
</div>
);
对齐问题，我现在有个不优雅的解决方法，
让 content 以及左边的，装在 leftContainer，样式 left = 0，
让 shortcut 以及右边的，装在 rightContainer，样式 right = 0。
但宽度问题 内缩 和 外撑 都无法解决。
不知道这样合适吗？
MenuItem 用 ref 放在 div，然后 获取 div 实际宽度，上传 MenuListContext 以便共享，上传前先对比，如果小于就不上传了，反而下载使用其他 MenuItem 的 div 较长的那个值。
【以下回答由 GPT 生成】
对于这个问题，使用动态计算 MenuList 下每个 MenuItem 宽度的方法是可行的。以下是实现这个方法的步骤：
maxWidth 来存储最长宽度。代码示例如下：import React, { createContext, useState } from 'react';
export const MenuListContext = createContext({
maxWidth: 0,
setMaxWidth: () => {},
});
const MenuList = ({ children }) => {
const [maxWidth, setMaxWidth] = useState(0);
return (
<div>
<MenuListContext.Provider value={{ maxWidth, setMaxWidth }}>
{children}
</MenuListContext.Provider>
</div>
);
};
export default MenuList;
menuItemRef 来获取 MenuItem 的实际宽度，并使用 useContext 获取 MenuListContext。更新代码如下：import React, { useRef, useContext, useEffect } from 'react';
import { MenuListContext } from './MenuList';
const MenuItem = ({ children }) => {
const menuItemRef = useRef(null);
const { maxWidth, setMaxWidth } = useContext(MenuListContext);
useEffect(() => {
if (menuItemRef.current.offsetWidth > maxWidth) {
setMaxWidth(menuItemRef.current.offsetWidth);
}
}, [maxWidth, setMaxWidth]);
return (
<div ref={menuItemRef}>
{children}
</div>
);
};
export default MenuItem;
display: inline-block。示例代码如下：import React from 'react';
import MenuList from './MenuList';
import MenuItem from './MenuItem';
const App = () => {
return (
<MenuList>
<MenuItem>
// 第一个 MenuItem 的内容
</MenuItem>
<MenuItem>
// 第二个 MenuItem 的内容
</MenuItem>
// 其他 MenuItem
</MenuList>
);
};
这样，每个 MenuItem 的宽度将以最长的那个为准。请注意，这个解决方案假设 MenuItem 是水平排列的，如果 MenuItem 是垂直排列的，需要进行相应的调整。