[英]Passing a JS object as a React props
我正在学习 React 课程,我们被要求将单个 JavaScript object 作为道具传递给 React 应用程序。 下面是我的代码:
import React from 'react';
import ReactDOM from 'react-dom';
const App = ( ) => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
const Header = ( ) => {
return (
<div>
<h1>{course.name}</h1>
</div>
)
}
const Content = ( ) => {
return (
<div>
<Part name={course.parts} exercises={course.parts} />
<Part name={course.parts} exercises={course.parts} />
<Part name={course.parts} exercises={course.parts} />
</div>
)
}
const Part = ( ) => {
return (
<div>
<p>{course.parts} {course.parts}</p>
</div>
)
}
const Total = () => {
return (
<div>
<p>Number of exercises {course.parts + course.parts + course.parts}</p>
</div>
)
}
return (
<div>
<Header course={{course}} />
<Content course={course} />
<Total course={course} />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
它返回一个错误——>对象作为 React 子对象无效。
我不能将它与箭头 function 一起使用。 我尝试了道具,但无法修复它。 请有人可以帮助我重构和修复我的代码。
尝试以这种方式使用道具:
const App = ( ) => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
const Header = ({course}) => {
return (
<div>
<h1>{course.name}</h1>
</div>
)
}
const Content = ({course}) => {
//use parts.map(el => <Part part={el}) instead
return (
<div>
<Part part={course.parts[0]} />
<Part part={course.parts[1]}/>
</div>
)
}
const Part = ({part}) => {
return (
<div>
<p>{part.name} {part.exercises}</p>
</div>
)
}
const Total = ({course}) => {
// dont forget to refactor counting exercises with reduce function or something prettier
return (
<div>
<p>Number of exercises {course.parts[0].exercises + course.parts[1].exercises + course.parts[2].exercises}</p>
</div>
)
}
return (
<div>
<Header course={course} />
<Content course={course} />
<Total course={course} />
</div>
)
}
另外,你可能有问题
<Header course={{course}} />
因为你通过 Object {course: {name: '...', parts: [...]}} 作为道具,而不是 {name: '..', parts: [..]}
最后,您可以从 App 组件中移出 Header、Content、Total 组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.