React组件props可见name/pages属性但访问返回undefined如何修复

两处写法错误导致属性访问不到：

1. Content组件向Part传参时写了<Part props={props} />，相当于给Part传了一个名为props的单属性，Part实际拿到的顶层props结构为{ props: { book: {name: 'Harry Potter', pages: 108} } }，顶层根本不存在pages、name字段。
2. 即使传参不嵌套，App传给Content的pages、name也是挂在book属性下的，不是直接在Content的props顶层，直接透传整个props也拿不到对应字段。

任选一种写法修改即可：

方案1：透传book对象，在Part中从book下取属性 #

const Part = (props) => {
  console.log(props);
  // 从传入的book属性中取pages
  return <p>{props.book.pages}</p>;
};

const Content = (props) => {
  console.log(props);
  // 将拿到的book属性单独传给Part，不要把整个props包成props字段传
  return <Part book={props.book} />;
};


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

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

export default App;

方案2：展开book属性，直接在Part顶层props访问 #

const Part = (props) => {
  console.log(props);
  // 此时pages、name直接挂在props顶层，可以直接访问
  return <p>{props.pages}</p>;
};

const Content = (props) => {
  console.log(props);
  // 用展开运算符把book对象的所有属性平铺到Part的props上
  return <Part {...props.book} />;
};


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

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

export default App;

注意：React函数组件接收的props是所有传入键值对组成的集合对象，手动给组件传一个名为props的属性时，该属性只会作为props对象下的一个嵌套字段存在，不会自动合并到props顶层，不要用<XXX props={xxx} />的写法传参。

内容的提问来源于stack exchange，提问作者laurimikhael