繁体   English   中英

将 JS object 作为 React 道具传递

[英]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 一起使用。 我尝试了道具,但无法修复它。 请有人可以帮助我重构和修复我的代码。

这是一个可以按需要工作的代码: Code 您的course.parts是一个数组,这就是发生一些错误的原因之一。 但是,还有一些与 props 相关的问题,我建议阅读React 文档

您还可以使用 map() function 来避免 Content 组件中的硬编码值:

const Content = () => {
    return (
      <div>
        {course.parts.map(singlePart => {
          return <Part singlePart={singlePart} />;
        })}
      </div>
    );
  };

此处描述了许多有用的数组函数。

尝试以这种方式使用道具:

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM