使用 getStaticProps 时如何从父组件接收道具？

Question

总结）当您当前的子组件仅从 getStaticProps 接收数据作为道具时，您如何从父组件接收道具？

例如，Todos 组件是父组件的子组件，Todos 需要从父组件接收 props。由于我在应用程序的开头使用 getStaticProps 获取数据，因此 Todos 组件仅具有来自 getStaticProps 的道具。

const Todos = ({ todos }) => {
  return (
    <div>
      <ul>
        {todos.length > 0 ? todos.map((todo) => <li>{todo}</li>) : "No todos"}
      </ul>
    </div>
  );
};

export default Todos;

export async function getStaticProps() {
  const todos = await fetch("https://.../todos");

  return {
    props: {
      todos,
    },
  };
}

在Todos组件的父组件中：

export default function Home({ currentUser, setCurrentUser }) {
  return (
    <div>
     <Todos currentUser={currentUser} setCurrentUser={setCurrentUser}/>
    </div>
  );
}

//and then in Todos.js

const Todos = ({ props }) => {
...}

如果我像上面那样传入 props，如果我在 Todos 组件中控制台记录 props，我只会看到 'currentUser'。我没有从 getStaticProps 中看到道具 (todos)。

2.So 我尝试了另一种使用 Link 的方法，但我无法找到使用 Link..

传递道具、currentUser 和 setCurrentUser 的方法

export default function Home({ currentUser, setCurrentUser }) {
  return (
    <div>
          <Link href="/Todos">
            <a>Click to see Todos</a>
          </Link>
    </div>
  );
}

我错过了什么？如有任何帮助，我们将不胜感激！

Answer 1

有一条规则规定您只能在 getStaticProps() 或 getServerSideProps() page component 所以我假设你有 Home 作为页面组件并且你想在 Home 中使用 Todo Component零件。实际上，您必须将 getStaticProps() 传输到 Home Component:

 export default function Home(props) {
  return (
   <div>
    <Todos todos={props.todos} currentUser={props.currentUser} setCurrentUser={props.setCurrentUser}/>
   </div>
   );
 }

export async function getStaticProps() {
  const todos = await fetch("https://.../todos");
  return {
    props: {
     todos,
    },
  };
}

简而言之，您应该更改结构。

使用 getStaticProps 时如何从父组件接收道具？

How to receive props from a parent component when using getStaticProps?

reactjs

next.js

react-props