如果一張圖片值一千個字，那么一個交互式演示一定值......一百萬？

您喜歡滾動瀏覽流行語來了解應用程序的用途嗎？可能不會。我并不想為我最新的熱情項目《Wanna》寫那么多廢話。因此，我尋求了一個更有趣的解決方案：將我的應用程序嵌套在自己的登陸頁面中，供用戶探索！

執(zhí)行

感謝 React 的可組合性，我們幾乎簡單地渲染我們的根 App 組件并收工：

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

但是，您會遇到一些問題：

1. 演示應用程序的導航將導航到真實應用程序
2. 演示應用程序將檢索真實數(shù)據(jù)，這可能會失敗或無法很好地展示它
3. 用戶可能不清楚他們正在看什么

讓我們解決這些問題。想要使用 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，以便在演示內部導航時瀏覽器保持在同一頁面上。

數(shù)據(jù)

為了向演示應用程序提供虛假數(shù)據(jù)，我們使用 useState 在客戶端應用程序內維護一個虛假的“后端”，并通過模擬客戶端或服務器（取決于實現(xiàn)）為其提供服務。它對應用程序代碼的其余部分影響最小，甚至允許我們使用演示進行手動測試 - 在快速迭代時非常方便。

我使用了mock-apollo-client；對于 REST 或 tRPC，您可以使用類似 nock 的東西。它們用于自動化測試，但正是我們所需要的。

首先，我們創(chuàng)建一個模擬客戶端，其請求處理程序以模仿真實后端的方式查詢和改變演示數(shù)據(jù)：

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 注入演示應用程序的真實客戶端。

視覺效果

它有效！現(xiàn)在我們如何讓用戶清楚地知道他們正在觀看交互式演示？

想要移動優(yōu)先，所以我選擇在手機框架內渲染演示。我使用 devices.css 因為它提供了我認為看起來最好的設備（即最小邊框以最大化演示空間）。但為了簡單起見，這里我們將使用一個支持 React 開箱即用的庫：react-device-frameset。

我們還可以使用縮放來縮小演示 UI，并將其很好地嵌套在頁面的其余部分中。在 Wanna 中，當使用 時，我必須反轉并解釋這種縮放。使用 visjs-html-nodes 繪制被邀請者圖，但大多數(shù)情況下它“正常工作”。

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

以上是立即吸引用戶：在 React SPA 中嵌入交互式演示的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！