为什么React.js向组件prop传递数组时需要使用额外的点号语法？

核心原因：React组件的入参规则 #

所有React函数组件的第一个入参永远是统一的props对象，你给组件传递的所有自定义属性都会成为这个对象的键值对，而不是直接作为独立变量传入。

你现在的写法属于概念混淆：
你在App里给Content组件传了<Content parts={course.parts} />，相当于给props对象添加了parts属性，值就是course.parts数组。但你写const Content = (parts) => { ... }的时候，误以为这里的parts就是你传的数组，实际上这个位置的参数是整个props对象，你传的数组存在这个对象的parts属性里，所以你必须写parts.parts[0].name才能拿到值，这就是你需要多写一层点号的原因。

正确写法调整 #

你可以通过props解构的方式简化代码，调整后就可以和你熟悉的Java/C#写法一致：

// 写法1：先取props对象，再提取对应属性
const Content = (props) => {
  const parts = props.parts // 这里拿到的才是你传入的数组
  console.log(parts[0])
  return (
    <>
      <Part part={parts[0]} />
    </>
  )
}

// 写法2：直接解构props，更简洁
const Content = ({ parts }) => {
  console.log(parts[0])
  return (
    <>
      <Part part={parts[0]} />
    </>
  )
}

其他需要修正的点 #

1. 你的Part组件也存在同样的props概念问题：你给Part传了<Part part={parts[0]} />，所以在Part里要拿属性的话，要么用props.part.name，要么直接解构：

// 正确的Part组件写法
const Part = ({ part }) => {
  return (
    <>
      <h2>Part {part.number}: {part.name}</h2>
      <h3>{part.exercises} exercises</h3>
    </>
  )
}

2. 你当前调用Part的时候同时传了part、name、exercises、number，属于重复传参，只需要传part就足够，不需要拆分属性单独传递。
3. 你定义course的parts数组里，每个对象的number: '1'后面都缺少逗号，属于语法错误，运行时会报错，记得补上。

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