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'))
最佳答案
这不是真正的 react 问题,而是访问部分数组的问题:
尝试:
<Total parts={course.parts[0].exercises} />
关于javascript - 如何在一个组件中传递数组中的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57742134/