组件内的反应组件不起作用

Question

我是 Reactjs 的新手，在使用 props 时，我根本无法让 Part 组件在 Content 组件内运行。 有没有办法通过编辑 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'));

编辑：改进格式

Answer 1

演示

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

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