在类流中找不到的属性& React

Question

我正在努力利用流程，并使它与我的一个反应组件很好地工作。然而，我得到了：

client/search:18 18: this.handleSearchSubmit = this.handleSearchSubmit.bind(this)；^属性handleSearchSubmit。属性:类SearchContainer扩展React.Component {^ SearchContainer

我设置的组件如下：

// @flow

import React, { PropTypes } from 'react';
import SearchForm from './search-form';

type Props = {
  onSearchUpdate: Function,
}


class SearchContainer extends React.Component {
  props: Props;


  constructor(props: Props) {
    super(props);
    this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
  }

  handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void {
    this.props.onSearchUpdate(searchTerm);
  }

  render() {
    return (
      <div className="searchBox">
        <SearchForm onSearchSubmit={this.handleSearchSubmit} />
      </div>
    );
  }
}

// SearchContainer.propTypes = {
//   onSearchUpdate: PropTypes.func,
// };

export default SearchContainer;

您将在前面看到，我在我的类的末尾使用了propTypes。问题：

1. 我的课程设置正确吗？
2. 为什么flow抱怨找不到属性handleSearchSubmit，类名SearchContainer的名称也一样？

Answer 1

流将类上的方法视为只读方法。因此，线

this.handleSearchSubmit = this.handleSearchSubmit.bind(this);

触发流错误。下面是一个相关的github问题：https://github.com/facebook/flow/issues/1517

有几个解决办法可以解决这个问题。我通常是这样处理的：

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

  const self: Object = this
  self.handleSearchSubmit = this.handleSearchSubmit.bind(this)
}

Answer 2

你好，我觉得这个@TLadd的答案是个黑客。

流请求的是handleSearchSubmit的类型，它没有找到它，您只需要在方法定义下面添加以下内容

  handleSearchSubmit: <your type>;

这是最后的代码

// @flow

import React, { PropTypes } from 'react';
import SearchForm from './search-form';

type Props = {
  onSearchUpdate: Function,
}


class SearchContainer extends React.Component {
  props: Props;
  // ->>>
  handleSearchSubmit: <your type>;
  // <---
  constructor(props: Props) {
    super(props);
    this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
  }

  handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void {
    this.props.onSearchUpdate(searchTerm);
  }

  render() {
    return (
      <div className="searchBox">
        <SearchForm onSearchSubmit={this.handleSearchSubmit} />
      </div>
    );
  }
}

// SearchContainer.propTypes = {
//   onSearchUpdate: PropTypes.func,
// };

export default SearchContainer;