非常感谢各位，我是At Engineer事业部的大目。
第一回的先锋将由我来担当！

嘿！最近开始使用React的初学者工程师，你听说过React的Props桶接力吗？
是的！即使我只用React已经一个小时了，我也知道！
但是即使被告知是从父组件传递Props给子组件，我也完全不懂…
没错！我也是从SES销售出身的文科毕业一年经验的小菜鸡工程师。
然而，现在我可以自信地说：
\ /能够理解Props桶接力/
所以，这次我尝试解释世界上最简单易懂的Props桶接力，专门为初学者们准备。

若 React 找到用户定义的组件，则将 JSX 中的属性和子元素作为单个对象传递给该组件。 这个对象被称为 “props”。

是的，即使被说了这样的话，我完全不明白呢┓(´Д｀)┏
是的，我是以前的我。

请今天能够掌握好概念后再回家哦^^

中国人民是如何分解Props的！

简单来说，就是参数！比如，为了识别人类，有一个名字叫做田中的变量。如果用编程来表示的话。

name: "田中"

就是这样。
在React的世界里，我们把这种参数称为Props。
(至少我这个菜鸟是这么认为的)

React的Props Bucket Relay是什么？

在本题的Props桶接力中，更好理解前，需要对React的机制进行解释。
简单说来，React是通过组合许多叫做组件的部件来构建应用程序。
可以想像成，为了建造房子，需要组合木材、锯子、钉子等”组件”。
然而，在React的世界里，木材、锯子、钉子等”组件”之间存在着父子关系。
例如，存在一个父组件叫锯子，它的材料是铁，就像孩子的意象。
也就是说，在React中存在一个锯子作为父组件的组件，通过将铁作为它的子组件来表达铁扮演的角色，这种特点可以更直观地理解铁的作用。嗯，易懂！
这就是通过组合父子关系的组件(部件)来构建应用程序的概念。
到这一步，我想你可能已经理解了Props桶接力的概念。
换句话说，Props桶接力就是将参数从父组件传递到子组件。
那么，让我们看一下实际的代码吧。

用代码实践！Props桶接力赛。

物件編

请在注释符号{/* */}中查看说明。

import React from "react";
import { Man } from "./Man"
function Human() {
  const tanaka = "田中"
  return (
    <Man { name: tanaka } /> 
    {/* ↑tanakaというオブジェクトをManという子コンポーネントに渡す。nameはあくまでキーなので、名前はなんでも良い。つまり、Human(人間)の親コンポーネントがMan(男性)というコンポーネントに田中という名前を渡しているということ。 */}
  )
}

import React from "react";
export function Man(props) {
  {/* ↑親コンポーネント(Human)ですでに　子コンポーネント(Man)がインポート(import)されて、使用されてるので、自動的にHumanが親、Manが子供と判別される。つまり、子コンポーネントのManの引数(括弧の部分)にpropsを入れることにより、親コンポーネントで渡された『name: tanaka』を受け取ることができる。 */}
  const name_man = props.name
  {/* ↑「props」というワードで明示的に親からきたものですよと表す。そこにprops.nameとすることで親からきたnameというキーを使いますよと指定をする。そうすることでprops.nameは"田中"となる。 */}
  return (
    <>
      {name_man}
    </> 
  )
}

田中

可以将 React.useState(“”) 中的 name 部分作为 props 传递。

功能编辑

我会在这里稍微升级一下。
对于React初学者来说可能会有些困难。
一旦你掌握了props的基础，再来找我吧。
但是因为我们无法避免传递函数，所以可能还需要记住这一点。

import React from "react";
import { Man } from "./Man"
function Human() {
  const [name, setName] = React.useState("");
  function changeName(name) {
    setName(name)
  }
  return (
    <Man { changeName: changeName } /> 
  )
}

setState无法直接通过props传递。
因此，需要将其作为函数传递给setState。
换句话说，如果是一个函数，就可以随意将其作为props传递给子组件。

import React from "react";
export function Man(props) {
  props.changeName("田中")
}

通过执行 props.changeName，可以触发父组件中的 changeName 函数，并将 “田中” 作为参数添加进去。因此，props.changeName(“田中”) 的结果将会是 “田中”。

结束了！

您对此感到如何？
如果能略微有Props桶接力的印象就好了。
请再回想一遍吧！Props桶接力是指从父组件传递给子组件。
更确切地说，是从父组件传递给子组件，然后再传递给子组件的子组件……就像接力一样！嗯，很容易理解！！！
唉，还要写十篇文章！！！
那么我们就在下次见面的那一天再见吧。