如何从一个组件中的数组传递对象？答案

【问题标题】：How do I pass object from array within one component?如何从一个组件中的数组传递对象？
【发布时间】：2020-01-04 14:48:11
【问题描述】：

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

在 const App = () => {} 内，我在 return 语句中呈现 Header 标记没有问题。事实上，它做了我想做的事，就是在 html 中打印“半栈应用程序开发”作为标题。

问题在于它下面的 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'))

【问题讨论】：

标签： javascript arrays reactjs object components

【解决方案1】：

这不是真正的反应问题，而是访问部件数组的问题：

试试：

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

【讨论】：