React的类型签名。FC在最近版本的React中发生了变化。
React应用程序包含以下组件:AppProvider和app。这是我经常重复的设计模式,我很惊讶(在AppProvider组件上(它会抛出错误:
Property 'children' does not exist on type '{}'.
import React from "react";
import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import { HashRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import fetchReducer from "reduxware/reducers/fetchReducer";
const rootReducer = combineReducers({
fetch: fetchReducer,
});
export const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware => getDefaultMiddleware().concat(thunk),
});
const AppProvider: React.FC = ({children} ) => {
return (
<Provider store={store}>
<Router basename={process.env.PUBLIC_URL}>{children}</Router>
</Provider>
);
};
export default AppProvider;
export type RootStateType = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
上面的文件几乎是从它工作的另一个项目中复制的1:1。我怀疑它可能是有依赖关系的东西,或者TS配置(但这些也是从工作源复制的(。所以,请也看看这里,只是给我一个提示在哪里寻找。
根据我之前的操作,我已经删除了整个节点模块,并重新安装了
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.6",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "5.0.0",
"redux": "^4.2.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"typescript": "^4.4.4",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"devDependencies": {
"@types/lodash": "^4.14.176",
"@types/react-dom": "^18.0.8",
"@types/react-redux": "^7.1.22",
"@types/react-router-dom": "^5.3.2",
"babel-jest": "^27.4.6",
"gh-pages": "^3.2.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
{
"compilerOptions": {
"target": "ES2015",
"downlevelIteration": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src",
"paths": {
"types/*": ["types/*"],
"hooks/*": ["hooks/*"],
"models/*": ["models/*"],
"components/*": ["components/*"],
"js/*": ["js/*"],
"icons/*": ["Icons/*"],
"styles/*": ["styles/*"],
"images/*": ["images/*"],
"countries/*": ["countries/*"]
}
},
"include": ["src"]
}
儿童道具已从React中移除。FunctionComponent(React.FC(,因此您必须在组件属性中显式声明它。
您可以通过接口传入,也可以像下面这样。
React.FC<{ children: ReactNode }>