如果一張圖片值一千個字，那麼一個互動式示範一定值......一百萬？
您喜歡滾動瀏覽流行語來了解應用程式的用途嗎？可能不會。我並不想為我最新的熱情項目《Wanna》寫那麼多廢話。因此，我尋求了一個更有趣的解決方案：將我的應用程式嵌套在自己的登陸頁面中，供用戶探索！
感謝 React 的可組合性，我們幾乎簡單地渲染我們的根 App 元件並收工：
export const InteractiveDemo = () => {
return (
<App />
)
}
但是，您會遇到一些問題：
讓我們來解決這些問題。想要使用 React Router v6 和 Apollo GraphQL，但無論技術如何，這些概念都適用。
為了將演示應用程式的導航與真實應用程式分開，我們將其包裝在另一個導航提供者中：
+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'
export const InteractiveDemo = () => {
return (
+ // Hack to nest MemoryRouter inside BrowserRouter.
+ // https://github.com/remix-run/react-router/issues/7375
+ <UNSAFE_LocationContext.Provider value={null}>
+ <MemoryRouter initialEntries={['/app']}>
<App />
+ </MemoryRouter>
+ </UNSAFE_LocationContext.Provider>
)
}
請注意，我們使用 MemoryRouter，以便在示範內部導覽時瀏覽器保持在同一頁上。
為了向演示應用程式提供虛假數據，我們使用 useState 在客戶端應用程式內維護一個虛假的“後端”，並透過模擬客戶端或伺服器（取決於實作）為其提供服務。它對應用程式程式碼的其餘部分影響最小，甚至允許我們使用演示進行手動測試 - 在快速迭代時非常方便。
我使用了mock-apollo-client；對於 REST 或 tRPC，您可以使用類似 nock 的東西。它們用於自動化測試，但正是我們所需要的。
首先，我們建立一個模擬客戶端，其請求處理程序以模仿真實後端的方式查詢和改變演示資料：
import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'
// Simplified example
export const useDemoClient = () => {
const [friends, setFriends] = useState[{
__typename: 'User',
id: 1,
name: 'Nick',
}]
// Cache should persist across clients
const cache = useMemo(() => {
// Should be the same cache configuration you provide to your real Apollo client
return new InMemoryCache()
}, [])
// We need to recreate the mock client whenever the data changes
// because it doesn't support resetting request handlers.
const mockClient = useMemo(() => {
const client = createMockClient({ cache })
client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
data: {
friends: friends
}
}))
client.setRequestHandler(ADD_FRIEND, ({ user }) => {
setFriends((prev) => prev.concat([user]))
return Promise.resolve({
data: {
addFriend: user
}
})
})
return client
}, [friends])
return mockClient
}
然後就像我們對導航所做的那樣，我們使用模擬客戶端將演示包裝在新的提供者中：
+import { ApolloProvider } from '@apollo/client'
export const InteractiveDemo = () => {
+ const demoClient = useDemoClient()
return (
+ <ApolloProvider client={demoClient}>
<UNSAFE_LocationContext.Provider value={null}>
<MemoryRouter initialEntries={['/app']}>
<App />
</MemoryRouter>
</UNSAFE_LocationContext.Provider>
+ </ApolloProvider>
)
}
如果您使用模擬伺服器，則可以將其 URL 注入演示應用程式的真實用戶端。
它有效！現在我們如何讓用戶清楚地知道他們正在觀看互動式簡報？
想要行動優先，所以我選擇在手機框架內渲染示範。我使用 devices.css 因為它提供了我認為看起來最好的設備（即最小邊框以最大化演示空間）。但為了簡單起見，這裡我們將使用一個支援 React 開箱即用的函式庫：react-device-frameset。
我們也可以使用縮放來縮小演示 UI，並將其很好地嵌套在頁面的其餘部分中。在 Wanna 中，當使用
export const InteractiveDemo = () => {
return (
<App />
)
}
以上是立即吸引用戶：在 React SPA 中嵌入互動式演示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
