Question

我正在学习React，并且正在练习功能组件。

我看到了一个示例，其中一个功能组件没有返回关键字就返回了结果。我没有看到该示例中的父标签，因此我尝试自己在本地进行练习。

编写并运行代码后，我没有在浏览器上获得任何输出，而是引发了一个错误，指出应该有一个父标记来封装其他提到的组件。

尽管我已经使用了一个父标记将其他代码封装在其中，但我不明白为什么会引发这种错误。该父标记不是通用HTML标记，而是自定义组件标记。然后，我尝试使用HTML的父标记，结果在浏览器中返回。

我无法理解React这样的行为背后的原因，以及为什么React不支持将自定义组件标签作为父标签。请帮忙。

作为参考，我的代码具有以下结构：

没有通用的HTML标记：-

export const Parent = () => {
     <SmallModal
            className='parent-modal'
            isOpen={true}
        >
            <BodyGrey>
                <header className='equip-modal-header'>
                    Practising React
                </header>
                <div>
                    <p>This is a functional component without return keyword.</p>
                </div>                
            </BodyGrey>
        </SmallModal>
}

具有通用HTML标记：-

export const Parent = () => {
<div>
     <SmallModal
            className='parent-modal'
            isOpen={true}
        >
            <BodyGrey>
                <header className='equip-modal-header'>
                    Practising React
                </header>
                <div>
                    <p>This is a functional component without return keyword.</p>
                </div>                
            </BodyGrey>
        </SmallModal>
</div>
}

Answer 1

这里的问题与arrow functions有关，当您想返回不带return关键字的值时，函数的主体应使用()而不是{}进行换行，像这样：

export const Parent = () => (
     <SmallModal
            className='parent-modal'
            isOpen={true}
        >
            <BodyGrey>
                <header className='equip-modal-header'>
                    Practising React
                </header>
                <div>
                    <p>This is a functional component without return keyword.</p>
                </div>                
            </BodyGrey>
        </SmallModal>
)

没有通用HTML标签，React功能组件不会返回结果

1 个答案: