Question

我正在完成在线课程，但遇到了一个看似简单但无法解决的问题。我试图重构内容组件，以便它本身不呈现任何零件名称或它们的练习数量。 const数据在APP组件中，但是我不确定如何在不将const数据放入Content组件中的情况下从Part组件访问它，这是错误的。

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

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

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>

Answer 2

您忘了将道具从Content传递给孩子（referred to as props drilling）

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

const Content = props => {
  const part1Props = { part1: props.part1, exercises1: props.exercises1 };
  // const { part1, exercises1 } = props;
  // More props ...
  return (
    <div>
      <Part1 {...part1props} />
      // <Part1 part1={part1} exercises1={exercises1}
      // More parts ...
    </div>
  );
};

const part1 = "Fundamentals of React";
const exercises1 = 10;

const App = () => {
  return (
    <div>
      <Content part1={part1} exercises1={exercises1} />
    </div>
  );
};

创建3个额外的组件以呈现组件的信息

2 个答案: