如何在React Native中访问WebView中的React Context ?

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} />) 
}} 
/>
)
}