如何在 React Native 中访问 WebView 内的 React 上下文？

Question

我希望能够在我的 WebView 中访问 React 上下文，但出现以下错误：

TypeError: undefined is not an object (evaluating 'Context._context')

这是我的代码：

// App.js

import React, { createContext } from 'react'
import { renderToString } from 'react-dom/server'
import { WebView } from 'react-native-webview'

export const AppContext = createContext({
    value: '',
    setValue: () => { }
})

export default function App() {
    const [value, setValue] = useState('Hello there')

    return (
        <AppContext.Provider value={{ value, setValue }}>
            <WebView source={{ html: renderToString(<WebViewComponent />) }} />
        </AppContext.Provider>
    )
}

// WebViewComponent.js

export default function WebViewComponent() {
    const { value, setValue } = useContext(AppContext)

    return (
        <div>
            {value}
        </div>
    )
}

Answer 1

因此，解决该问题的一个简单方法是将任何内容作为道具传递给 renderToString(<WebViewComponent />)，而不是使用上下文。

所以在我的例子中它会是这样的：

// App.js

import React from 'react'
import { renderToString } from 'react-dom/server'
import { WebView } from 'react-native-webview'

export default function App() {
    const [value, setValue] = useState('Hello there')

    return (
        <WebView 
            source={{ 
                html: renderToString(<WebViewComponent value={value} setValue={setValue} />) 
            }} 
        />
    )
}

如何在 React Native 中访问 WebView 内的 React 上下文？

How to Access React Context Inside a WebView in React Native?

webview

reactjs

react-native

react-context