Question

我是新来的，我有疑问：

为什么我应该在return语句中使用花括号？

示例代码：

import React from 'react';
import Hobbies from './Hobbies';

const HobbyList = () => {

    const hobbies = ["Surfing", "Rock climbing", "Mountain biking", "Breakdancing"];
    return (
        <div>
           { hobbies.map(hob => <Hobbies hobbies={hob}/>)}
        </div>
    );
};

export default HobbyList;

Answer 1

需要以某种方式将代码与HTML标记分开，这是在JavaScript语句中运行return代码的方式。

文档说明：

它称为JSX，是JavaScript的语法扩展。我们建议将它与React一起使用，以描述UI的外观。 JSX可能会让您想起模板语言，但是它具有JavaScript的全部功能。

建议阅读的文档：

我希望这会有所帮助！

Answer 2

在React中，花括号用于将JavaScript嵌入JSX（JavaScript语法扩展）内。在您的<div></div>标签中，如果没有大括号，那将只是一堆文本和一个字符串。

您可以在React documentation中找到有关此问题的更多信息。

Answer 3

在react中的return函数中，您只能编写JSX或简单字符串。要使用您的react组件中声明的变量或状态，请使用大括号{}。这与ejs等模板语言所使用的相同。

就像在组件中一样，如果您编写时没有大括号，它将仅在屏幕上显示您实际编写的内容。

TLDR-大括号用于在JSX中嵌入表达式。您可以在此处了解更多信息-https://reactjs.org/docs/introducing-jsx.html

Answer 4

如果您希望编译器将代码示例视为表达式而不是文本，则应使用花括号。

如果您在这里不使用花括号，则基本上将其呈现为字符串，直到找到JSX元素-在您的特殊情况下-仅将<Hobbies hobbies={hob}/>呈现为组件。其余的只是静态文本。

为什么我们应该在退货声明中使用{}

4 个答案: