[英]react, redux and typescript error during build
I am very new to react and redux, I am following this tutorial , at the part about Making a container
, I am getting an error (fail to compile): 我对响应和还原是非常陌生的,我正在按照本教程进行有关
Making a container
的部分,但出现错误(无法编译):
./src/containers/Hello.tsx
(24,61): error TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'ComponentType<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusia...'.
Type 'typeof Hello' is not assignable to type 'StatelessComponent<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnt...'.
Type 'typeof Hello' provides no match for the signature '(props: { enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
since I am following the tutorial step by step at this stage I am not sure how to fix this error. 由于我目前正在逐步按照本教程进行操作,因此不确定如何解决此错误。
Hello container: 你好容器:
import Hello from '../components/Hello';
import * as actions from '../actions/';
import { StoreState } from '../types/index';
import { connect, Dispatch } from 'react-redux';
export function mapStateToProps({ enthusiasmLevel, languageName }: StoreState) {
return {
enthusiasmLevel,
name: languageName,
};
}
export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
return {
onIncrement: () => dispatch(actions.incrementEnthusiasm()),
onDecrement: () => dispatch(actions.decrementEnthusiasm()),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Hello);
Hello component: 你好组件:
import * as React from 'react';
import './Hello.css';
export interface Props {
name: string; // required
enthusiasmLevel?: number; // optional (using ? after its name)
onIncrement?: () => void;
onDecrement?: () => void;
}
class Hello extends React.Component<Props, object> {
render () {
const { name, enthusiasmLevel = 1, onIncrement, onDecrement } = this.props;
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic.');
}
return(
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
<div>
<button onClick={onDecrement}>-</button>
<button onClick={onIncrement}>+</button>
</div>
</div>
);
}
}
export default Hello;
function getExclamationMarks (n: number) {
return Array(n + 1).join('!');
}
The error indicates that connect function expects a stateless component while you provide a stateful component - since the second argument for React.Component is object . 该错误表明在您提供有状态组件时, connect函数需要无状态组件-因为React.Component的第二个参数是object 。
I suggest to go with: 我建议去:
const Hello = ({
name,
enthusiasmLevel = 1,
onIncrement,
onDecrement
}: Props) => {
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic.');
}
return(
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
<div>
<button onClick={onDecrement}>-</button>
<button onClick={onIncrement}>+</button>
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.