组件内部的React组件不起作用

问题描述

我是Reactjs的新手，使用props时，我根本无法使Part组件在Content组件内运行。有没有一种方法可以通过编辑“零件”或“内容”组件而无需更改标签？ 我知道对于经验丰富的React开发人员来说这有点容易，但是过去2个小时我一直在努力工作，但没有成功。有人可以帮我吗？

import React from 'react';
import ReactDOM from 'react-dom';


const Part = (props) => {
  return (
    <p>{props.part} {props.exercises}</p>
  );
};

const Content = (props) => {
  return (
    <div>
      <Part part={props.part1} exercises={props.exercises1} />
      <Part part={props.part2} exercises={props.exercises2} />
      <Part part={props.part3} exercises={props.exercises3} />
    </div>
  );
};

const App = () => {
  const part1 = 'Fundamentals of React';
  const exercises1 = 10;
  const part2 = 'Using props to pass data';
  const exercises2 = 7;
  const part3 = 'State of a component';
  const exercises3 = 14;

  return (
    <div>
      <Content />         
    </div>
  )
};

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

编辑：改进的格式

解决方法

Demo

将所有变量收集到一个对象数组中，并将其传递到组件树下

import React from "react";
import ReactDOM from "react-dom";

const Part = (props) => {
  return (
    <p>
      {props.part} {props.exercises}
    </p>
  );
};

const Content = ({ data }) => {
  return (
    <div>
      {data.map(part => <Part {...part} />)}
    </div>
  );
};

const App = () => {
  const data = [
    { part: "Fundamentals of React",exercises: 10 },{ part: "Using props to pass data",exercises: 7 },{ part: "State of a component",exercises: 14 }
  ];

  return (
    <div>
      <Content data={data} />
    </div>
  );
};

ReactDOM.render(<App />,document.getElementById("root"));