reactjs React -将渲染属性与条件组件一起使用会导致钩子错误

kmb7vmvb 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(121)

给出这个最小的例子：

import React, { useState } from 'react';

function Component({ num }) {
    const [lorem, setLorem] = useState('lorem');
    return (
        <div>
            {num}: {lorem}
        </div>
    );
}

function AnotherComponent({ render = Component }) {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
            <button type="button" onClick={() => setIsOpen(true)}>
                Open
            </button>
            {isOpen ? render({ num: 123 }) : null}
        </div>
    );
}

当运行一个点击按钮的单元测试时，我得到错误Rendered more hooks than during the previous render.。
这个错误是有道理的-在一个渲染中useState('lorem')不在文档中，然后当按钮被点击时，它就在文档中了。但是，当我使用JSX定义组件时，这个错误不会发生（即{isOpen ? <Component num={123} /> : null}，但当我尝试使用渲染属性时，它会发生。
有没有一种方法可以像这样使用渲染 prop 模式并避免钩子错误？

reactjs

来源：https://stackoverflow.com/questions/75755491/react-using-render-props-with-conditional-components-causes-hooks-error

1条答案

按热度按时间

xqk2d5yq1#

如前所述，您需要使用render作为JSX标记，否则render中的钩子调用不会被视为单独组件的一部分，而是AnotherComponent的一部分。在React中，未内置的JSX标记必须以大写字母开头，因此您可以将结构化的render prop别名为Render，然后将其用作组件：

function AnotherComponent({ render: Render = Component }) { // alias the render prop
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
            <button type="button" onClick={() => setIsOpen(true)}>
                Open
            </button>
            {isOpen ? <Render num={123} /> : null}
        </div>
    );
}

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs React -将渲染属性与条件组件一起使用会导致钩子错误

1条答案

相关问题

热门标签

最新问答