React组件访问props数组元素返回undefined及传值规则咨询

问题1解决：为什么props[0]是undefined #

React组件接收的所有外部传参都会被封装为一个普通对象存入props，你在App组件中写的<Content parts={parts} />，等价于给这个props对象添加了一个名为parts的属性，属性值才是你定义的数组。
你打印props时输出的{parts: Array(3)}已经明确了这一点：props本身不是数组，所以用数组下标的方式props[0]取值自然返回undefined。正确的取值逻辑是先取props的parts属性，再按下标取元素：props.parts[0]。

另外你的Part组件接收的是name和exercises两个独立属性，之前写的<Part parts={props[0]} />即使拿到了值也无法正常渲染，需要调整为：

// 方式1：单独传对应属性
<Part name={props.parts[0].name} exercises={props.parts[0].exercises} />
// 方式2：用对象展开语法简化传参
<Part {...props.parts[0]} />
// 数组长度不固定时可以用map遍历渲染
{props.parts.map(item => <Part key={item.name} {...item} />)}

问题2解决：为什么子组件要知道「parts」这个命名 #

首先要明确两个完全独立的命名逻辑：

• 父组件内部的变量名：你在App里把数组存在名为parts的变量中，这个名字仅在App作用域内生效，和子组件没有任何关系
• 子组件的props属性名：你写<Content parts={parts} />时，等号左侧的parts是你给子组件约定的props属性名，和父组件的变量名没有绑定关系

你完全可以根据子组件的约定自定义属性名，不需要让子组件感知父组件的内部变量名。比如你约定Content组件接收名为itemList的属性，那父组件传参时可以写：

// 等号左侧是子组件约定的属性名，右侧是父组件自己的内部变量
<Content itemList={parts} />

这时子组件用props.itemList就能拿到数组，完全不需要知道父组件的变量叫parts。

如果你完全不想在子组件里写固定的属性名，也可以用React默认的children属性传值：
父组件传参：

<Content>{parts}</Content>

子组件取值：

const parts = props.children

内容的提问来源于stack exchange，提问作者Andy Li