请教一个关于React props的问题

（不知发这个版块是不是合适的。。）在读官方文档关于组件和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吗？是起任何一个名字都可以吗？如果有看懂的大神，还请赐教谢谢！

liuzz10 发表于 2020-9-19 13:26
很清楚呢，终于明白了这个点！
那是不是说，如果要改名字的话，比如在A这个component里，想用Key来取代s ...

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

1. <Avatar var1={props.foo} var2={props.bar}/>

复制代码

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

编译前

1. import React from 'react'
   
2. 
   
3. function Avatar(props) {
   
4.   return (
   
5.     <div>{props.user.name}</div>
   
6.   )
   
7. }
   
8. 
   
9. function Comment(props) {
   
10.   return (
    
11.     <div>
    
12.             <div>{props.otherthing}</div>
    
13.       <Avatar user={props.author} />
    
14.     </div>
    
15.   )
    
16. }

复制代码

编译后

1. "use strict";
   
2. 
   
3. var _react = _interopRequireDefault(require("react"));
   
4. 
   
5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   
6. 
   
7. function Avatar(props) {
   
8.   return /*#__PURE__*/_react.default.createElement("div", null, props.user.name);
   
9. }
   
10. 
    
11. function Comment(props) {
    
12.   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, props.otherthing), /*#__PURE__*/_react.default.createElement(Avatar, {
    
13.     user: props.author
    
14.   }));
    
15. }

复制代码

你会看到,这些jsx其实都是createElement的调用,其中,第一个参数是Component对象或者是HTML基本元素名.第二个参数是props对象,第三个参数是这个Componet的所有子Component,也就是children.你所最迷惑的更名其实就是这里

1. /*#__PURE__*/_react.default.createElement(Avatar, {
   
2.     user: props.author
   
3.   }));

复制代码

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

wsha8 发表于 2020-9-19 17:46
你把React想复杂了,React的基本抽象单元就是组件(Component),每一个组件从外部接收的几乎所有变量都存在p ...

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

参考文档里的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的文档真的不咋地…… ）

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

hychl1023 发表于 2020-9-18 11:39
参考文档里的codepen（https://reactjs.org/redirect-to-codepen/components-and-props/extracting-compone ...

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

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

（不知道讲清楚了嘛）

hychl1023 发表于 2020-9-18 21:00
因为React component之间的信息传递就是通过props进行的。

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

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

xining 发表于 2020-9-18 10:42
每个componet 都有自己的props。 , 这里的props指的是Comment的props,   alt={props.user.name}  这里的pro ...

谢谢大神指教，我消化一下。。

建议你可以看个视频入门一下? https://www.youtube.com/watch?v=sBws8MSXN7A  光看文档效率太低了，边看视频边做，然后再回来看文档比较好

comment 有个props，avatar也有props，avatar里定义了它的props里有个user，所以用avatar需要pass个user，然后这个user=comment的props.author。其实可以把avatar写成Avatar（{user}）这样不需要写那么多props了…