Question

我有一个用TypeScript编写的React组件：

class App extends React.Component<props> {

  constructor(props) {
    super(props);
    this.treeNavElement = this.treeNavElement.bind(this);
  }

  treeNavElement() {
    return (
      <div></div>
    )
  }

  render() {
    return (
      <div>
        {
          this.props.NavDataTree.map(function(elem) {
            return <div key={elem.id} onClick={this.treeNavElement}>{elem.name}</div>
          }, this)
        }
      </div>
    )
  }
}

export default App;

我的问题是打字稿编译器对我大喊大叫，因为这行：

return <div key={elem.id} onClick={this.treeNavElement}>{elem.name}</div>

话说：

[ts]'this'隐式具有类型'any'，因为它没有类型注释。

在地图功能之外，map的第二个参数和this.props工作正常，但onClick this内部丢失。

如果我在"noImplicitThis": false中设置了tsconfig.json，那很好，但我想知道是否有办法解决这个问题而不会隐瞒这一点？

Answer 1

您使用function，因此this 丢失了。

this.props.NavDataTree.map(function(elem) { })

如果你知道它在运行时this是什么，你可以输入function(this: XXX) {}。或者您可以使用箭头运算符，因此this将传播到函数

this.props.NavDataTree.map(elem => { this.XXX })

Answer 2

这是一个快速修复，将以下行添加到tsconfig.js。

 "noImplicitThis": false,

引发带有隐含“ any”类型的“ this”表达式的错误。

TypeScript（ReactJS）编译器错误，这隐式具有类型any

2 个答案: