我尝试用最易懂的方式解释React的Props桶接力给你听

非常感谢各位,我是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桶接力是指从父组件传递给子组件。
更确切地说,是从父组件传递给子组件,然后再传递给子组件的子组件……就像接力一样!嗯,很容易理解!!!
唉,还要写十篇文章!!!
那么我们就在下次见面的那一天再见吧。