- Objective:
- Breadcrumb:
# 概念阐释
## 语义
除了定义的组件外，我们可以通过函数来创建新的组件。以前，React 组件用[[JavaScript Class类]]来定义，现在[[React hooks]]是React 应用程序的标准。
## 语法
```jsx
import React from 'react';
function MyFirstComponent() {
return <h1>Hello, this is a function component body.</h1>
};
```
- 函数名必须以大写字母开头，并遵守**PascalCase**的写法，来告诉计算机这是 react 组件而不是 HTML 标签
- `return`是必须包括的
- 必须返回一个[[JSX Elements]]，但目前还不能渲染结果，只是先定义了组件
# 实例
和[[React 组件 函数组件#^becdcf|事件监听]]不同，函数组件中定义的函数，调用函数时通常会看到的括号。
```jsx
function Example() {
function greeting() {
return 'Yo!';
}
// Render <h1>Yo!</h1>
return <h1>{greeting()}</h1>;
}
```
# 相关内容
## 函数组件与[[JSX]] COMPONENTS AND ADVANCED JSX
### 多行 html
多行 HTML，`return `关键字后需要加上括号`()`
```jsx
//MyQuote.js
import React from 'react';
function MyQuote() {
return (
<blockquote>
<p>
What is important now is to recover our senses.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Susan_Sontag">
Susan Sontag
</a>
</cite>
</blockquote>
);
};
export default MyQuote;
```
### 多行html属性
`return `关键字后需要加上括号`()`，函数组件中的内容是 JSX 语法
```jsx
//Owl.js
import React from 'react';
const owl = {
title: 'Excellent Owl',
src: 'https://content.codecademy.com/courses/React/react_photo-owl.jpg'
};
//Define function component here:
function Owl() {
return (
<div>
<h1>{owl.title}</h1>
<img src={owl.src} alt={owl.title} />
</div>
);
};
export default Owl;
```
### 函数组件中包含逻辑
只有 JSX 部分写在return()中，JavaScript 逻辑部分写在 return 外面
```jsx
//Friend.js
import React from 'react';
//数组对象
const friends = [
{
title: "Yummmmmmm",
src: "https://content.codecademy.com/courses/React/react_photo-monkeyweirdo.jpg"
},
{
title: "Hey Guys! Wait Up!",
src: "https://content.codecademy.com/courses/React/react_photo-earnestfrog.jpg"
},
{
title: "Yikes",
src: "https://content.codecademy.com/courses/React/react_photo-alpaca.jpg"
}
];
// New function component starts here:
function Friend(){
const friend = friends[2];
return(
<div>
<h1>{friend.title}</h1>
<img src={friend.src}/>
</div>
)
};
export default Friend;
```
### 函数组件与[[JSX condition if]]语句
if语句写在函数组件内，`return`之前
```jsx
// TonightsPlan.js
import React from 'react';
const fiftyFifty = Matn.random()<0.5;
function TonightsPlan(){
if(fiftyFifty){
return <h1>Tonight I'm going out WOOO</h1>
}else{
return <h1>Tonight I'm going to bed WOOO</h1>
}
}
export default TonightsPlan;
```
### 函数组件与[[JSX 事件处理程序]]和事件处理程序
^becdcf
- **事件处理程序函数在函数组件中定义**，按照惯例，以单词“`handle`”开头，后跟它所处理的事件类型。
- **注意**：`handleHover()` 函数的传递没有我们在**调用函数时通常会看到的括号**。这是因为将其作为 `handleHover` 传递表示只有在事件发生后才应调用它。将其作为 `handleHover()` 传递会立即触发该函数，所以要小心！
```jsx
//Button.js
import React from 'react';
function SubmitButton() {
function handleClick() {
alert('Submission Succcessful.');
}
return <button onClick={handleClick}> Submit </button>;
}
export default SubmitButton;
```
# 参考资料
- [Putting Logic in a Function Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/render-function-calculations)
- [Use a Variable Attribute in a Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/component-variable-attribute)
- [Use Multiline JSX in a Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/render-multiline-jsx)
- [Use a Conditional in a Function Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/render-function-if-statement)
- [Event Listener and Event Handlers in a Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/component-event-listener)