Javascript 组件内部的React组件不工作

我是Reactjs新手，在使用道具时，我无法让部件组件在内容组件内部运行。有没有办法在不更改标记的情况下编辑零件或内容组件？ 我知道这对经验丰富的React开发者来说有点容易，但在过去的两个小时里，我一直在努力解决这个问题，但都没有成功。有人能帮我吗

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'));

编辑：改进格式

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

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"));

---

谢谢你，我的朋友！这就是我要找的！