javascript - 创建 3 个额外的组件来呈现组件的信息

Question

我正在完成一门在线课程，但遇到了一个看似简单但无法解决的问题。我正在尝试重构内容组件，因此它不会单独呈现任何部件的名称或它们的练习数量。const 数据在 APP 组件中，但我不确定如何从 Part 组件访问它而不将 const 数据放入Content错误的组件中。

const Part1 = props => (
  <p>
    {props.part1} {props.exercises1}
  </p>
);

const Part2 = props => (
  <p>
    {props.part2} {props.exercises2}
  </p>
);

const Part3 = props => (
  <p>
    {props.part3} {props.exercises3}
  </p>
);
const Content = props => {
  return (
    <div>
      <Part1 />
      <Part2 />
      <Part3 />
    </div>
  );
};

const App = () => {
  const course = "Half Stack application development";
  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
        part1={part1}
        exercises1={exercises1}
        part2={part2}
        exercises2={exercises2}
        part3={part3}
        exercises3={exercises3}
      />
    </div>
  );
};

现在我的输出没有任何内容

标签： javascriptreactjs

Answer 1

你需要再次传递道具，

<div>
  <Part1 part1={props.part1} exercises1={props.exercises1} />
  <Part2 part2={props.part2} exercises2={props.exercises2} />
  <Part3 part3={props.part3} exercises3={props.exercises3} />
 </div>