当我从react-bootstrap中尝试这个示例代码时,我不断收到错误消息,例如“参数'context'隐式具有'any'类型;“属性”value“在类型”Readonly〈{}〉“上不存在。”
格式为.tsx:
class FormExample extends React.Component {
constructor(props, context) {
super(props, context);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: ''
};
}
getValidationState() {
const length = this.state.value.length;
if (length > 10) return 'success';
else if (length > 5) return 'warning';
else if (length > 0) return 'error';
return null;
}
handleChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<form>
<FormGroup
controlId="formBasicText"
validationState={this.getValidationState()}
>
<ControlLabel>Working example with validation</ControlLabel>
<FormControl
type="text"
value={this.state.value}
placeholder="Enter text"
onChange={this.handleChange}
/>
<FormControl.Feedback />
<HelpBlock>Validation is based on string length.</HelpBlock>
</FormGroup>
</form>
);
}
}
export default FormExample;
在Jumbo.tsx中:
const Jumbo = () => (
<FormExample />
);
8条答案
按热度按时间eulz3vhy1#
在TypeScript中,一个React.Component是一个泛型类型(aka React.Component〈PropType,StateType〉),所以你要为它提供(可选的)prop和state类型参数。
它看起来像这样:
不要忘记,您可以导出/导入/扩展这些类型/接口以重用它们。
Class Methods
:你可以用正常的方式来做,只要记住你的函数的任何参数也需要输入。下面是类的代码:
tpgth1q72#
在函数Component中,仅在props处给予any
bz4sfanl3#
表示功能组件
就这样加一句:
函数名(属性:任意)
{返回(〈〉〈/〉)}
r3i60tvu4#
在 typeScript 中,您应该安装@types/react,并且在扩展
React.Component
时,您需要指定props
和state
类型。9rygscc15#
在我的案例中,指定构造函数参数的类型解决了这个问题。
ztigrdn86#
我刚在一个功能组件上发现此错误。
为了获得
props.children
等信息以及自定义道具,您应该执行以下操作。q9yhzks07#
在类型脚本中,您需要指定要发送的属性的类型,否则它将采用在@types/react中定义的默认类型。如果您不想指定任何类型,则显式要求组件期望状态和属性为“any”类型。
第一个类型参数用于定义您所期望的属性类型,另一个用于组件的状态类型。
hc2pp10m8#
在
tsconfig.json
集合"noImplicitAny": false,
中,这对我很有效