reactjs - 如何在 Material-UI 菜单中使用自定义功能组件

Question

我正在使用 Material-UI 来设计我正在构建的 React 应用程序。我正在尝试在 <Menu> 中使用我自己的自定义功能组件组件，我收到一个奇怪的错误:

Warning: Function components cannot be given refs.
Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

Check the render method of ForwardRef(Menu).
    in TextDivider (at Filter.js:32)

发生这种情况的 JSX 如下所示:(第 32 行是 TextDivider 组件)

<Menu>
    <TextDivider text="Filter Categories" />
    <MenuItem>...</MenuItem>
</Menu>

TextDivider 所在位置:

const TextDivider = ({ text }) => {
    const [width, setWidth] = useState(null);
    const style = {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    };

    const hrStyle = {
        width: `calc(100% - ${width}px)`,
        marginRight: 0,
        marginLeft: 0
    };

    const spanStyle = {
        color: '#555',
        whiteSpace: 'nowrap'
    };

    const ref = createRef();
    useEffect(() => {
        if (ref.current) {
            const width = ref.current.getBoundingClientRect().width + 35;
            console.log('width', width);
            setWidth(width);
        }
    }, [ref.current]);

    return (
        <div style={style}>
            <span ref={ref} style={spanStyle}>{ text }</span>
            <Divider className="divider-w-text" style={ hrStyle }/>
        </div>
    );
};

奇怪的是，当这个组件在常规容器中单独设置时，它渲染得非常好，但似乎只有在 <Menu> 内渲染时才会抛出此错误。组件。

此外，我发现很奇怪的是，如果我像这样将 TextDivider 包装在 div 中，这个错误就会完全消失:

<Menu>
    <div>
        <TextDivider text="Filter Categories" />
    </div>
    <MenuItem>...</MenuItem>
</Menu>

但是，这对我来说就像胶带一样，我宁愿理解为什么我不能只在菜单中渲染这个组件的根本问题。我没有在我的功能组件中使用任何类型的 Material-UI 引用，也没有在 <Divider> 上放置引用。我的<TextDivider>中的组件组件，所以我不明白为什么它会抛出这个错误。

如果您能深入了解这种行为发生的原因，我们将不胜感激。

我尝试过使用 useCallback钩子(Hook)，createRef() , useRef() ，并阅读我能找到的有关在功能组件中使用钩子(Hook)的所有内容。该错误本身似乎具有误导性，因为即使是 react 文档本身也显示使用功能组件引用:https://reactjs.org/docs/hooks-reference.html#useref

Answer 1

Menu 使用 Menu 的第一个子项作为 Menu 内部使用的 Popover 组件的“内容 anchor ”。 “内容 anchor ”是 Popover 尝试与 anchor 元素(菜单外部的元素，是定位菜单的引用点)对齐的菜单内的 DOM 元素。

为了利用第一个子元素作为内容 anchor ，Menu 为其添加了一个引用(使用cloneElement)。为了避免收到您收到的错误(并且为了使定位正确工作)，您的函数组件需要将 ref 转发到它呈现的组件之一(通常是最外层组件 - 在您的情况下是一个 div)。

当您使用 div 作为 Menu 的直接子级时，您不会收到错误，因为 div 可以成功接收引用。

SakoBu 引用的文档包含有关如何将引用转发到函数组件的详细信息。

结果应如下所示(但我是在手机上回答这个问题，如果有任何语法错误，很抱歉):

const TextDivider = React.forwardRef(({ text }, ref) => {
    const [width, setWidth] = useState(null);
    const style = {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    };

    const hrStyle = {
        width: `calc(100% - ${width}px)`,
        marginRight: 0,
        marginLeft: 0
    };

    const spanStyle = {
        color: '#555',
        whiteSpace: 'nowrap'
    };
    // Separate bug here.
    // This should be useRef instead of createRef.
    // I’ve also renamed this ref for clarity, and used "ref" for the forwarded ref.
    const spanRef = React.useRef();
    useEffect(() => {
        if (spanRef.current) {
            const width = spanRef.current.getBoundingClientRect().width + 35;
            console.log('width', width);
            setWidth(width);
        }
    }, [spanRef.current]);

    return (
        <div ref={ref} style={style}>
            <span ref={spanRef} style={spanStyle}>{ text }</span>
            <Divider className="divider-w-text" style={ hrStyle }/>
        </div>
    );
});

您可能还会发现以下答案很有用:

What's the difference between `useRef` and `createRef`?