[英]Passing a JS object as a React props
I am taking a React course and we are asked to pass a single JavaScript object as props to a React app.我正在学习 React 课程,我们被要求将单个 JavaScript object 作为道具传递给 React 应用程序。 Below is my code:下面是我的代码:
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'));
It is returning an error --> Objects are not valid as a React child.它返回一个错误——>对象作为 React 子对象无效。
I couldn't use this with the arrow function.我不能将它与箭头 function 一起使用。 I tried props but couldn't fix it.我尝试了道具,但无法修复它。 Please can someone help me to refactor and fix my code.请有人可以帮助我重构和修复我的代码。
Here is a code that should work as desired: Code .这是一个可以按需要工作的代码: Code 。 Your course.parts
is an array and that is one of the reasons why some errors occured.您的course.parts
是一个数组,这就是发生一些错误的原因之一。 However, there were some more problems related to props and I would suggest reading React documentation .但是,还有一些与 props 相关的问题,我建议阅读React 文档。
You can also avoid hard-coded values in Content component by using map() function:您还可以使用 map() function 来避免 Content 组件中的硬编码值:
const Content = () => {
return (
<div>
{course.parts.map(singlePart => {
return <Part singlePart={singlePart} />;
})}
</div>
);
};
Many useful array functions are described here .此处描述了许多有用的数组函数。
Try to use Props this way:尝试以这种方式使用道具:
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>
)
}
Also, you could have problem with另外,你可能有问题
<Header course={{course}} />
because you pass Object {course: {name: '...', parts: [...]}} as props, not {name: '..', parts: [..]}因为你通过 Object {course: {name: '...', parts: [...]}} 作为道具,而不是 {name: '..', parts: [..]}
Finally, you can move out your Header, Content, Total components from App component.最后,您可以从 App 组件中移出 Header、Content、Total 组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.