一亩三分地

 找回密码 注册账号

扫描二维码登录本站

BBS
Offer多多
Salarytics
交友
Learn
Who's Hiring?
Visa Tracker
疫情动态
指尖新闻
Instant
客户端
微信公众号
扫码关注公众号
留学申请公众号
扫码关注留学申请公众号
Youtube频道
留学博客
关于我们
查看: 695|回复: 13
收起左侧

请教一个关于React props的问题

[复制链接] |只看干货 |做项目
我的人缘0

升级   22.5%


分享帖子到朋友圈
liuzz10 | 显示全部楼层 |阅读模式
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   100% (27)
 
 
0% (0)    👎
本帖最后由 liuzz10 于 2020-9-18 10:12 编辑

(不知发这个版块是不是合适的。。)在读官方文档关于组件和props这一章节(https://zh-hans.reactjs.org/docs/components-and-props.html,在提取组件时给props起了一个更通用名字user,程序怎么知道这个user指代的是谁呢?
我理解的是传进来props.author,于是到
src={props.user.avatarUrl}
alt={props.user.name}
这两行的时候我就不懂了,这个user指的是什么呢?是用user替代了author吗?是起任何一个名字都可以吗?如果有看懂的大神,还请赐教谢谢!







本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册账号

x

上一篇:kaggle求组队
下一篇:招募1年以上 iOS开发经验工程师
我的人缘0

升级   8.5%

wsha8 2020-9-19 17:46:21 | 显示全部楼层
本楼: 👍   100% (2)
 
 
0% (0)   👎
全局: 👍   96% (79)
 
 
3% (3)    👎
liuzz10 发表于 2020-9-19 13:26
很清楚呢,终于明白了这个点!
那是不是说,如果要改名字的话,比如在A这个component里,想用Key来取代s ...

你把React想复杂了,React的基本抽象单元就是组件(Component),每一个组件从外部接收的几乎所有变量都存在props里面方便你去调用,例如这里

[HTML] 纯文本查看 复制代码
<Avatar var1={props.foo} var2={props.bar}/>


我们只是把产生了一个新的object传给了Avatar,并且默认他的名字为props.在这里面,我们仅仅是将props.foo赋值给了var1这个field,把props.bar赋值给了var2这个field.并且React还会加一点其他的东西比如children之类的.但这些都是纯粹的JavaScript. 不要被jsx这个语法迷惑了.如果我们把上面这个例子编译一下

编译前
[HTML] 纯文本查看 复制代码
import React from 'react'

function Avatar(props) {
  return (
    <div>{props.user.name}</div>
  )
}

function Comment(props) {
  return (
    <div>
    	<div>{props.otherthing}</div>
      <Avatar user={props.author} />
    </div>
  )
}


编译后
[JavaScript] 纯文本查看 复制代码
"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function Avatar(props) {
  return /*#__PURE__*/_react.default.createElement("div", null, props.user.name);
}

function Comment(props) {
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, props.otherthing), /*#__PURE__*/_react.default.createElement(Avatar, {
    user: props.author
  }));
}


你会看到,这些jsx其实都是createElement的调用,其中,第一个参数是Component对象或者是HTML基本元素名.第二个参数是props对象,第三个参数是这个Componet的所有子Component,也就是children.你所最迷惑的更名其实就是这里
[JavaScript] 纯文本查看 复制代码
/*#__PURE__*/_react.default.createElement(Avatar, {
    user: props.author
  }));

其实就是我们创建了一个对象,然后把props.author赋值给了user.虽然底层还会有一点优化,但是原理就是这样简单
回复

使用道具 举报

我的人缘0
conghao2016 2020-9-19 18:35:30 | 显示全部楼层
本楼: 👍   100% (1)
 
 
0% (0)   👎
全局: 👍   93% (728)
 
 
6% (52)    👎
wsha8 发表于 2020-9-19 17:46
你把React想复杂了,React的基本抽象单元就是组件(Component),每一个组件从外部接收的几乎所有变量都存在p ...

这位兄弟说得对 ,props更像是变量储存区,你要啥都有,存啥都在这
回复

使用道具 举报

我的人缘0

升级   57.14%

hychl1023 2020-9-19 03:39:10 | 显示全部楼层
本楼: 👍   100% (1)
 
 
0% (0)   👎
全局: 👍   99% (153)
 
 
0% (1)    👎
参考文档里的codepen(https://reactjs.org/redirect-to- ... tracting-components)上的code,一开始是一个Comment component,里面包含三个prop: date, text以及author。其中author是一个object,包含name和avatarUrl两个属性。
然后为了以后方便,想要把那个<img>的标签拎出来单独做一个Avatar component,然后传给Avatar的prop为user={props.author}(见LZ的最后一段代码)。这一步里就是把author转为里user

(React的文档真的不咋地…… )
回复

使用道具 举报

我的人缘0

升级   1.5%

xining 2020-9-19 02:42:19 | 显示全部楼层
本楼: 👍   100% (1)
 
 
0% (0)   👎
全局: 👍   100% (3)
 
 
0% (0)    👎
本帖最后由 xining 于 2020-9-19 02:44 编辑

每个componet 都有自己的props。<Avadar user=props.author> , 这里的props指的是Comment的props,   alt={props.user.name}  这里的props指的是Avatar的props。所以不是什么名字都可以。是Avadar 接收的时候重命名成什么 后面就要用什么。 在你的例子里,Avadar 的 user就是Comment的author
回复

使用道具 举报

我的人缘0

升级   22.5%

 楼主| liuzz10 2020-9-19 12:45:28 | 显示全部楼层
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   100% (27)
 
 
0% (0)    👎

谢谢大神,没想到codepen里面代码这么有帮助,以前都忽视了下次我会参考~
有一点不太理解,就是如果user = props.author,那么为什么不是{user.avatarUrl}而是{props.user.avatarUrl}呢?
回复

使用道具 举报

我的人缘0

升级   57.14%

hychl1023 2020-9-19 13:00:13 | 显示全部楼层
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   99% (153)
 
 
0% (1)    👎
liuzz10 发表于 2020-9-19 12:45
谢谢大神,没想到codepen里面代码这么有帮助,以前都忽视了下次我会参考~
有一点不太理解,就是如果user ...

因为React component之间的信息传递就是通过props进行的。

比如现在有一个名为A的component,传入了一个属性someKey,值为someValue的key-value pair:
<A someKey="someValue" />
那么在A中要得到someValue的话,就得通过props.someKey,而不能直接写someKey

(不知道讲清楚了嘛)
回复

使用道具 举报

我的人缘0

升级   22.5%

 楼主| liuzz10 2020-9-19 13:26:01 | 显示全部楼层
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   100% (27)
 
 
0% (0)    👎
hychl1023 发表于 2020-9-18 21:00
因为React component之间的信息传递就是通过props进行的。

比如现在有一个名为A的component,传入了一 ...

很清楚呢,终于明白了这个点!
那是不是说,如果要改名字的话,比如在A这个component里,想用Key来取代someKey这个名字,只需要写{A.Key}就好了呢?好像props.author变成props.user就是这样子改的。
我在好奇为什么程序知道user取代的是author而不是其他的属性。。。是不是程序会去查看这个新的名字处于props的哪个相对位置,然后就知道取代的是哪个属性了呢?
回复

使用道具 举报

我的人缘0

升级   22.5%

 楼主| liuzz10 2020-9-19 13:28:48 | 显示全部楼层
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   100% (27)
 
 
0% (0)    👎
xining 发表于 2020-9-18 10:42
每个componet 都有自己的props。 , 这里的props指的是Comment的props,   alt={props.user.name}  这里的pro ...

谢谢大神指教,我消化一下。。
回复

使用道具 举报

我的人缘0

升级   9.5%

Alduinleung 2020-9-19 17:02:45 | 显示全部楼层
本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   95% (22)
 
 
4% (1)    👎
建议你可以看个视频入门一下? https://www.youtube.com/watch?v=sBws8MSXN7A  光看文档效率太低了,边看视频边做,然后再回来看文档比较好
回复

使用道具 举报

我的人缘0

升级   0.57%

本楼: 👍   0% (0)
 
 
0% (0)   👎
全局: 👍   96% (419)
 
 
3% (16)    👎
comment 有个props,avatar也有props,avatar里定义了它的props里有个user,所以用avatar需要pass个user,然后这个user=comment的props.author。其实可以把avatar写成Avatar({user})这样不需要写那么多props了…
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

隐私提醒:
■拉群请前往同学同事飞友|拉群结伴版块,其他版块拉群,帖子会被自动删除
■论坛不能删帖,为防止被骚扰甚至人肉,不要公开留微信等联系方式,请以论坛私信方式发送。
■特定版块可以超级匿名:https://pay.1point3acres.com/tools/thread
■其他版块匿名方法:http://www.1point3acres.com/bbs/thread-405991-1-1.html

手机版|||一亩三分地

Powered by Discuz! X3

© 2001-2013 Comsenz Inc. Design By HUXTeam

Some icons made by Freepik from flaticon.com

快速回复 返回顶部 返回列表