Question

我试图将我在网上找到的用React JS编写的搜索栏css控件转换为React TS，但对TS很新，并且很难知道要搜索什么并找出最后的错误问题。

错误发生在const { inputValue } = this.state;行，消息为

键入＆＃39; Readonly＆lt; {}＆gt;＆＃39;没有财产＆quot; inputValue＆＃39;并且没有字符串索引签名。

我的控制码

import * as React from 'react';
import './App.css';

class ControlBar extends React.Component {

    constructor(props: any) {
        super(props);

        this.state = {
          inputValue: ''
        };

        this.onInputChange = this.onInputChange.bind(this);
      }

    onInputChange(e: any) {
        const { value } = e.target;

        this.setState({
          inputValue: value
        });
      }

    public render() {
         const { inputValue } = this.state;

        return (<div className='input-wrapper'>
            <input
              placeholder='Search...'
              value={inputValue}
              spellCheck={false}
              />
            <span className='input-highlight'>
            { inputValue.replace(/ /g, "\u00a0") }
          </span>  
          </div>);


  }
}

export default ControlBar;

Answer 1

您可以在S签名的React.Component部分中定义州的类型：

React.Component<P,S>

为它定义一个界面：

interface ControlBarState {
    inputValue?: string
}

然后将您的班级声明为：

class ControlBar extends React.Component<YourPropsType, ControlBarState>

在反应ts组件中声明常量时出错

1 个答案: