繁体   English   中英

console.log 显示该道具具有属性名称和编号,但它们未定义

[英]console.log shows that the prop has attributes name and number, but they are undefined

所以我有以下代码,我想在返回 props.pages 的 Part 组件内返回一本书的页数。 console.log(props) 打印出书籍的属性(名称和页数)。 但是,当通过 props.pages 或 props.name 在 Part 组件中访问它们时,它返回 undefined?

我将如何解决这个问题

const Part = (props) => {
  console.log(props);
  return <p>{props.pages}</p>;
};

const Content = (props) => {
  console.log(props);
  return <Part props={props} />;
};


const App = () => {
  const book1 = {
    name: "Harry Potter",
    pages: 108,
  };


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

export default App;

您已将“道具”包装在另一个“道具”中。 当你这样做时:

<Content book={book1} />

Content组件中的props对象有一个名为book的属性。 所以当你这样做时:

<Part props={props} />

Part组件中的props对象有一个名为props的属性。 属性是一个具有名为book的属性的对象。 您需要引用该属性:

return <p>{props.props.pages}</p>;

或者,您可以更明确地传递值:

<Part pages={props.pages} />

或者传播props对象的属性以隐式传递所有这些属性:

<Part {...props} />

在任何一种情况下,您都可以直接访问该属性:

return <p>{props.pages}</p>;

尝试这个 :

const Part = (data) => {
  const { props } = data;
  return <p>{props.book.pages}</p>
};

演示: https://codesandbox.io/s/vigorous-jepsen-lqjs01?file=/src/App.js:24-113 ://codesandbox.io/s/vigorous-jepsen-lqjs01?file=/src/App.js:24-113

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM