typescript - 包装在 StoreProvider 中时,React 组件变为空白
问题描述
嗨,我有一个非常简单的反应组件,它可以工作
import React, {Fragment} from 'react';
export default function App() : JSX.Element {
return (
<Fragment>
<h1>Rick and Morty</h1>
<p>Pick your favorite episode!!!</p>
</Fragment>
)
}
我使用RenderDOM.render(<App/>, document.getElementById('root'))
现在我将我的渲染方法更改为
import {StoreProvider} from './Store';
import App from './App';
ReactDOM.render(<StoreProvider><App/></StoreProvider>, document.getElementById('root'););
我的商店看起来像
import React, {useReducer} from 'react';
interface IState {
episodes: string[],
favorites: string[]
};
interface IAction {
type: string,
payload: any
};
const initialState : IState = {
episodes: [],
favorites: []
};
export const Store = React.createContext<IState | any>(initialState);
function reducer(state: IState, action: IAction): IState {
switch(action.type) {
case 'FETCH_DATA':
return state;
default:
return state;
}
}
export function StoreProvider(props: any): JSX.Element {
const [state, dispatch] = useReducer(reducer, initialState);
return <Store.Provider value={{state, dispatch}}>{props.childen}</Store.Provider>
}
一旦我这样做,我的反应组件就会变成空白,并且开发人员控制台或 webpack-dev-server 中没有错误消息或任何内容。
为什么它变成了空白?我无法解决此问题,因为绝对没有错误消息
我的仓库在这里https://github.com/abhsrivastava/react-rick-and-morty
解决方案
不应该是props.children
,而不是props.childen
在 StoreProvider 渲染函数中吗?
您可以向 StoreProvider 添加道具类型以防止这种情况发生
type IStoreProviderProps = { children: React.ReactNode }
export function StoreProvider({ children }: IStoreProviderProps): JSX.Element {
const [state, dispatch] = useReducer(reducer, initialState);
return <Store.Provider value={{state, dispatch}}>{children}</Store.Provider>
}
希望它有所帮助:)
推荐阅读
- python - 如何将列表转换为字典?
- java - 在不同线程中启动的 ServerSocket 使 JavaFX 应用程序冻结
- prolog - 递归地在序言中创建一个列表
- r - 从现有数据框重塑 R 数据框
- serialization - 为什么在使用手动实现的 Serialize 对具有结构变体的枚举进行序列化到 TOML 时会出现 UnsupportedType 错误?
- javascript - 多元素的一个功能
- reactjs - 动态反应将子级添加到 jsx/component
- java - JPQL - 如果参数为空,那么所有
- python - 如何将列表中的每个第 n 个术语转换为 Pandas 导入的列?
- apache - Javascript 加载失败 (404) 但路径正确。怎么来的?