怀疑如何将信息传递给组件reactjs

Question

import React from 'react' import ReactDOM from 'react-dom' const Header =(props)=>{ return(
<h1>{props.course.name}</h1>
) } const Content =(props)=>{ //probar pasar el course para sacar del objeot el arreglo return(

<div>
  {props.parts.map((value)=>
  <Part key={value.id} part={value.name} exercises={value.exercises}/>)}
</div>
) } const Total =(props)=>{//no se debe usar indice de arreglo para key por cmbios en arrglo // const total =0 //props.parts.forEach(element => {total +=element.exercises // console.log(parts) console.log(props.parts,'prosp') const total= props.parts.reduce((totalA,valorAC)=>
{ /* console.log(totalA.exercises,'totalA valora q se imprime como q es total a') console.log(valorAC.exercises,'valorAC valora q se imprime como q es ACumulador') console.log(totalA.exercises+valorAC.exercises, 'Suma Probadni') */ return { exercises:
totalA.exercises + valorAC.exercises} }) const total2 = props.parts.reduce((totalA,valorAC)=> totalA+valorAC.exercises,0) /* console.log(total2,'total 2 para ver si suma') console.log(total.exercises) */ //}); return(
<h4>
  Total of exercises {total.exercises}
</h4>
) } const Part = (props)=>{ return(
<p>
  {props.part} {props.exercises}
</p>
) } const Course=(props)=>{ return (
<div>
  {console.log(props.course ,'header de curso q se pasa')}


  <Header course={props.course}/> {console.log(props.course.parts,'partes de curso q se pasa')}
  <Content parts={props.course[1].parts} index={props.course.index}/>

  <Total parts={props.course[1].parts}/>

</div>
) } const App = () => { // const course = 'Half Stack application development' const course ={ id:1, name :'Half Stack application development', parts:[ { id:1, name:'Fundamentals of React', exercises: 10 }, { id:2, name:'Using props to pass data', exercises:7
}, { id:3, name:'State of a component', exercises:14 } ] } const courses = [ { name: 'Half Stack application development', id: 1, parts: [ { name: 'Fundamentals of React', exercises: 10, id: 1 }, { name: 'Using props to pass data', exercises: 7, id: 2
}, { name: 'State of a component', exercises: 14, id: 3 }, { name: 'Redux', exercises: 11, id: 4 } ] }, { name: 'Node.js', id: 2, parts: [ { name: 'Routing', exercises: 3, id: 1 }, { name: 'Middlewares', exercises: 7, id: 2 } ] } ] //retorno de curso
con arreglos return (
<Course course={courses.forEach(coursef=>{ console.log(coursef, 'curso que retorna')// return coursef })} /> ) /* return (
  <Course course={course}/> ) */ } ReactDOM.render(

  <App />, document.getElementById('root'))

Answer 1

{courses.map(course => <Course course={course} />)}

在课程数组上使用这个即映射并调用