回归基础：React 中的道具是什么？

如果你已经熟悉JavaScript中的论点和函数是如何工作的,那么理解补丁是一块蛋糕!简而言之,补丁用于在React中将数据从一个家长组件传递给一个孩子的组件,它们是组件通信的主要机制。

像大多数伟大的发明一样,总有一个简单的核心想法,把一切都放在一起,在React中,它可能是支持系统,允许你像JavaScript函数一样对待React组件。

Props === 函数参数

如果我告诉你,你已经知道什么是props了,你会怎么看?好吧,如果你知道JavaScript...你知道!

请考虑这个 vanilla JavaScript 函数:

1function Greeter(name) {
2  return 'hello ' +name;
3}

它有一个单个参数,名为名称。将不同的参数传递到参数中,会产生不同的结果:

1Greeter('world')
2// --> "hello world"
3
4Greeter('dolly')
5// --> "hello dolly"
6
7Greeter('its me')
8// --> "hello its me"

这与反应有什么关系?

您可以将 React 组件视为基本上是一个 JavaScript 函数,让我们创建一个 React 组件来说明这一点:

1function Greeter(props) {
2  return <p>hello {props.name}</p> 
3};

再加上Greeter的组成部分......

1function App() {
2  return (
3    <div>
4      <h1>HELLO APP</h1>
5      <Greeter name="world"/>  {/* 💥 "world" is the prop value*/}
6    </div>
7  )
8};

您刚刚将 prop 值传递到<Greeter/>,现在Greeter组件将可以访问name prop 的值! 简而言之,所有 props 都是! 而不是这样呼吁Greeter:

1Greeter('some value');
2// --> "some value"

你用这个 HTML-esque 名为 JSX 的语法召唤它:

1<Greeter name="some value"/>
2// --> <p>hello some value</p>

而Greeter获得了这样传递给它的奖励:

1import React from 'react';
2
3function Greeter(props) {
4  return (
5    <p>hello {props.name}</p>
6  )
7}
8
9export default Greeter;

React 中的 passing props 这个语法来自 HTML 世界,其中属性被用来赋予 HTML 元素的某些属性。

<$>[注]到目前为止,我们只使用了 strings,但支持程序可以采用任何原生JavaScript类型(例如,数组,布尔值,对象字母,函数)。

作为一个新来回应的人,你可能会被诱惑去认为补贴是全新的和奇怪的东西,而不是试图把它们看成是你为某个功能提供的论点......因为在其核心上,这就是它们的全部。

<$>[注] 查看官方的React docs 了解更多关于props。