reactjs - TypeScript (ReactJS) 编译器错误，隐含类型为 any

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;

我的问题是 typescript 编译器对我大喊大叫，因为这一行:

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

说:

[ts] 'this' implicitly has type 'any' because it does not have a type annotation.

在 map 函数之外，在 map 的第二个参数和 this.props 中它工作正常，但在 onClick 内部 this 丢失了。

如果我在 tsconfig.json 中设置 "noImplicitThis": false 没问题，但我想知道是否有办法在不关闭 implicitthis 的情况下解决这个问题？

Answer 1

您使用了一个函数，所以this 丢失了。

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

如果您在运行时知道 this 是什么，则可以键入 this function(this: XXX) {}。或者您可以使用箭头运算符，这样 this 就会传播到函数中

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