访问数组元素时，我得到了未定义的值，但仅使用数组名称时控制台就会显示值。 代码：

const Part = (props) => {
  return <p>{props.name} {props.exercises}</p>
}

const Content = (props) => {

  // when i use console.log(props[0])
  // it shows undefined
  // 
  // but when i use console.log(props)
  // it shows the array information as 
  // {parts: Array(3)}
  // parts: Array(3)
  // 0: {name: 'Fundamentals of React', exercises: 10}
  // 1: {name: 'Using props to pass data', exercises: 7}
  // 2: {name: 'State of a component', exercises: 14}
  // length: 3
  // [[Prototype]]: Array(0)
  // [[Prototype]]: Object

  return (
    <div>
       <Part parts={props[0]} />
    </div>
  )
}

const App = () => {
  const course = 'Half Stack application development'
  const parts = [
    {
    name: 'Fundamentals of React',
    exercises: 10
    },
  
   {
    name: 'Using props to pass data',
    exercises: 7
    },
  
  {
    name: 'State of a component',
    exercises: 14
  }
  ]

  return (
    <div>
      <Content parts={parts} />
    </div>
  )
}

所以我不明白为什么在 Content 中， console.log(props) 返回数组信息，但 console.log(props[0]) 显示未定义，在 App 中没有任何结果。

更新： 感谢大家的回复。现在我知道如果我在 Content 中使用“props.parts”，我会得到正确的结果。然后我又有了一个问题（抱歉，我是 JS 和 React 的新手）： 因为“parts”是在 App 中定义的并传递给 Content。在定义 Content 时，我不应该使用或知道“parts”。那么为什么我需要在 Content 中使用“props.parts”？