javascript - 如何在一个组件中传递数组中的对象？

Question

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

在 const App = () => {} 中，我可以毫无问题地在 return 语句中呈现 Header 标记。事实上，它完成了我想要它做的事情，即在 html 中将“Half Stack application development”打印为标题。

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

对于像我这样刚刚开始学习 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'))

Answer 1

这不是真正的 react 问题，而是访问部分数组的问题:

尝试:

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