Javascript 如何从一个组件内的数组传递对象？

Const应用程序引用了它上面的另外两个组件。在运行时，它成功编译，没有错误，但我没有得到想要的结果

在const App=（）=>{}中，我在return语句中呈现Header标记没有问题。事实上，它做了我希望它做的事情，即在html中打印“半堆栈应用程序开发”作为标题

问题在于它下面的Total标签。在标题下面，我想将数字342作为段落标记呈现在网页上，但它不起作用

对于像我这样刚开始学习React的新手，任何帮助都将不胜感激。谢谢：）

//Header负责呈现课程名称。
常量头=（道具）=>{
返回(
{props.course}
)
}
//Total渲染练习的总量。
常量总数=（道具）=>{
返回(
练习总数：{props.parts}

)
}
//Header负责呈现课程名称。
常量应用=（）=>{
常数课程={
名称：“半堆栈应用程序开发”，
部分：[{名称：'One'，练习：342}]
}
返回(
{/* 
*/}
)
} 
ReactDOM.render（，document.getElementById（'root'））

这实际上不是react问题，而是访问部件阵列的问题：

尝试：

// Header takes care of rendering the name of the course.

const Header = (props) => { 
    return (
        <div>
            <h1>{props.course}</h1>        
        </div>
    )
}
// Total renders the total amount of exercises.

const Total = (props) => {
    return (
        <div>
            <p>Total number of exercises:{props.parts}</p>
        </div>
    )
}

// Header takes care of rendering the name of the course.

const App = () => {
    const course = {
        name: 'Half Stack application development' , 
        parts: [{name:'One' , exercises:342}]

      }

    return (
        <div>
            <Header course={course.name} />
            <Total parts={course.parts.exercises} /> 

            {/* 
            <Content parts={parts} />
            */}

        </div>
    )
} 

ReactDOM.render(<App />, document.getElementById('root'))

<Total parts={course.parts[0].exercises} />