javascript - 为什么我们应该在 return 语句中使用 {}

Question

我是 React 新手，我有疑问:

为什么我应该在 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 标记分开，这就是您在 return 语句中运行 JavaScript 代码的方式。

正如文档所述:

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

建议阅读的文档:

1. Introducing JSX
2. Embedding Expressions in JSX

希望这会有所帮助!