Question

我正在上一门React课程，要求我们将一个JavaScript对象作为道具传递给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子对象无效。

我不能将 this 与箭头功能一起使用。我尝试了 props ，但无法修复。请有人可以帮助我重构和修复我的代码。

Answer 1

以下代码应可按需工作：Code。您的course.parts是一个数组，这就是发生某些错误的原因之一。但是，还有更多与道具有关的问题，建议您阅读React documentation。

您还可以通过使用map（）函数来避免Content组件中的硬编码值：

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

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

Answer 2

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

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}} />

因为您将对象{课程：{名称：'...'，零件：[...]}}作为道具，而不是{名称：'..'，零件：[..]}

最后，您可以从应用程序组件中移出标题，内容和总计组件。

将JS对象传递为React道具

2 个答案: