console.log 顯示該道具具有屬性名稱和編號，但它們未定義

Question

所以我有以下代碼，我想在返回 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;

Answer 1

您已將“道具”包裝在另一個“道具”中。 當你這樣做時：

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

Answer 2

嘗試這個 ：

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