从哪里开始...我正在使用create-react-app生成启动器 reactjs-redux-typescript-webpack-donetcore 应用程序。在构建过程中，它抛出了许多本质上相似的错误——反应类型不匹配。生成的代码似乎与我在网上找到的其他示例一致，因此我不清楚哪里出了问题或如何解决这些错误。我将列出适当的配置文件、有问题的 tsx 文件和第一个错误（因为它在其他 tsx 文件中很常见）。
我试过的
我认为该问题与新的 reactjs rewrite (v16) 与生成的代码不兼容有关，因此我对代码库使用了react-codemod迁移实用程序 - 没有修改文件。
TIP用于-d空运行
同时，我将阅读 tsx/jsx 并查看是否有任何点击，因为所有 reactjs/typescript 对我来说都是新的。
webpack 命令：
webpack -d --config webpack.config.js --colors --display-error-details
使用的 package.json 依赖项
"@types/classnames": "2.2.3",
"@types/history": "4.6.0",
"@types/react": "^16.0.10",
"@types/react-dom": "16.0.0",
"@types/react-hot-loader": "3.0.4",
"@types/react-redux": "5.0.10",
"@types/react-router": "4.0.15",
"@types/react-router-dom": "4.0.8",
"@types/react-router-redux": "5.0.8",
"@types/webpack": "3.0.13",
"@types/webpack-env": "1.13.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"babel-preset-env": "^1.6.0",
"history": "4.7.2",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.6",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "2.2.0",
"style-loader": "0.19.0",
"typescript": "^2.5.3",
"webpack": "3.6.0",
"webpack-merge": "4.1.0"
"awesome-typescript-loader": "^3.2.3",
"babel-cli": "^6.26.0",
"babel-preset-react": "^6.24.1",
"react-scripts": "^1.0.14",
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"jsx": "react",
"experimentalDecorators": true,
"sourceMap": true,
"skipDefaultLibCheck": true,
"strict": true,
"lib": ["es6", "dom"],
"types": ["webpack-env"]
},
"exclude": [
"bin",
"node_modules"
]
}
错误
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
Types of property 'type' are incompatible.
Type 'string | React.ComponentClass<any> | React.StatelessComponent<any>' is not assignable to type 'string | React.ComponentClass<any> | React.StatelessComponent<any>'. Two different types with this name exist, but they are unrelated.
Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
Type 'ComponentClass<any>' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:28:24
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:40:38
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/components/Counter.tsx:31:3
TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentType<CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementC...'.
Type 'typeof Counter' is not assignable to type 'StatelessComponent<CounterState & { increment: () => IncrementCountAction; decrement: () => Decre...'.
Type 'typeof Counter' provides no match for the signature '(props: CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementCountAction; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
引导客户端.tsx
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as
ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history } children={ routes } />
</Provider>
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
计数器.tsx
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';
type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators & RouteComponentProps<{}>;
class Counter extends React.Component<CounterProps, {}> {
public render() {
return (
<div>
<h1>Counter</h1>
<p>This is a simple example of a React component.</p>
<p>Current count: <strong>{this.props.count}</strong></p>
<button className="btn btn-default" onClick={() => { this.props.increment() }}>Increment</button>
<button className="btn btn-default" onClick={() => { this.props.decrement() }}>Decrement</button>
</div>
);
}
}
// Wire up the React component to the Redux store
export default connect(
(state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
CounterStore.actionCreators // Selects which action creators are merged into the component's props
)(Counter);