conditional rendering

使用Vue，您可以使用組件定義應用程式的佈局。起初，您手動將組件放置在所需位置，但有時需要更靈活的方式來根據應用程式狀態顯示或隱藏組件。 使用條件指令 最簡單的選擇是使用 v-if 和 v-else 指令。 這裡有個例子。v-if 指令檢查計算屬性 noTodos，如果狀態屬性 todos 至少包含一個項目，則返回false： <template> <main> <AddFirstTodo v-if="noTodos" /> <div v-else> <AddTodo /> <Todos :todos=todos /> </div> </main> </template> <script> export default { data() { return { todos: [] } }, computed: { noTodos() { return this.todos.length === 0 } } } </script> 這使得可以解決許多應用程式的需求，而無需達到更複雜的設定。條件可以嵌套，例如： <template> <main> <Component1 v-if="shouldShowComponent1" /> <div v-else> <Component2 v-if="shouldShowComponent2" /> <div v-else> <Component3 /> </div> </div> </main> </template> 使用 component 元件和 is 除了使用 v-if 和 v-else 結構，您可以建立模板，其中有一個將動態分配組件的佔位符。...

不行。 我不知道具體的技術原因，但是這是不可能的。 我在使用SWR和特別是useSWR hook時碰到了這個問題。 const ({ data } = useSWR(`/api/user`, fetcher) 我想在使用者登錄時只從API中檢索一些數據，並且我想“好的，我可以這樣做”: let data if (loggedIn) { ;({ data } = useSWR(`/api/user`, fetcher) } 但是..不行。 React會在控制台中報錯，可能會顯示如下的錯誤訊息： 警告: React檢測到Hooks調用的順序在Course中發生了變化。如果不修正，這將導致錯誤和bug。 解決方案取決於使用的hook。在這種情況下，useSWR hook提供了一個非常快速和高效的解決方案，因為我可以將API端點替換為null以避免加載數據： const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher) 我將條件語句放在應用hook的內部，這使它對我起作用了。