reactjs - 如何在 React Native 中访问 WebView 内的 React 上下文?
问题描述
我希望能够在我的 WebView 中访问 React Context,但出现以下错误:
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>
)
}
解决方案
因此,解决该问题的一个简单方法是将任何东西作为道具传递给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} />)
}}
/>
)
}
推荐阅读
- wordpress - 如何将相同的类添加到wordpress中的所有现有帖子?
- javascript - Vuejs:我无法为同一个 vue 元素生成新内容
- excel - 您如何在“直到循环”中取平均值?
- android - 如何根据android系统设置禁用日夜主题的自动更改?
- android - 如何在自定义 lint 规则中解决 context.report 的重载解析歧义?
- javascript - 在反应项目中显示代码块
- css - Bootstrap Carousel Control - 将它们更改为带有圆形背景的箭头
- mysql - 在主主复制中使用 int primary id 会发生什么?
- python - Django createView 将当前 user_id 传递给 Modelform
- c# - c#中如何对json进行序列化和反序列化