首先

本次将写关于React组件。

系列

這篇文章是為React基礎課程而連載的。以下是前一章的內容，供有興趣的人參考。

想要在JSX中展开变量或使用箭头函数（React基础课程2）- Qiita

第一篇文章如下。

使用React来渲染JSX内容（使用create-react-app）（React基础课程1）- Qiita

“组件”的含义是什么？

组件的概念与函数类似。也就是说，将输入进行某种处理并输出结果的部分或组件被称为组件。然后，通过组合这些组件来构建更大的应用程序。

文法

首先，创建一个通常的 React Element，然后再创建一个 React Component。

React元素

import React from "react";
import { render } from "react-dom";

const returnTxt = () => {
  return <p>sample txt</p>;
};

render(returnTxt(), document.getElementById("root"));

那么，让我们尝试使用 React 组件来编写这段代码。

React组件

在进行定义时，有一些规则需要遵循。

• const で宣言する場合や、renderの第1引数のJSXとして渡す際、文頭を大文字にします

renderの第1引数のJSXとして渡す際、タグで囲みます（閉じタグも書く） 例:

import React from "react";
import { render } from "react-dom";

const ReturnTxt = () => {
  return <p>sample txt</p>;
};

render(<ReturnTxt />, document.getElementById("root"));

尽管结果相同，但 React 组件的创建方式略有不同。

那么，让我们继续谈论并尝试向React组件传递一些值吧。

在这种情况下，您可以将参数传递给React组件，方法是将其放在render函数的第一个参数的JSX中，类似于key=”value”的形式。

import React from "react";
import { render } from "react-dom";

const ReturnTxt = props => {
  return <h1>{props.title}</h1>;
};

render(<ReturnTxt title="My Blog" />, document.getElementById("root"));

你可以传递多个参数。

import React from "react";
import { render } from "react-dom";

const ReturnTxt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
};

render(
  <ReturnTxt title="My Blog" body="hello, world" />,
  document.getElementById("root")
);

让我们在 React 组件中查看 props 的内容。

console.log(props)

控制台将以以下方式输出。

Object {title: "My Blog", body: "hello, world"}
    title: "My Blog"
    body: "hello, world"

从标题和内容中可以看出已经赋值了。

可以将props以其他方式接收。我会先写下代码。

import React from "react";
import { render } from "react-dom";

const ReturnTxt = ({title, body}) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
    </div>
  );
};

render(
  <ReturnTxt title="My Blog" body="hello, world" />,
  document.getElementById("root")
);

何不同的地方在于箭頭函式的參數部分，使用花括號 { } 接收，例如這次可以將對象內容存入名為title和body的變量中，並直接使用這些變量名進行展開。

我认为，与使用道具相比，能够清楚地知道接收到了什么是更好的选择。

请看/参考如下内容

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛