reactjs - 类中未找到属性 - Flow 和 React

Question

我正在尝试利用 Flow 并使其与我的 React 组件完美配合。但是我得到:

client/search-container.jsx:18 18: this.handleSearchSubmit = this.handleSearchSubmit.bind(this); ^^^^^^^^^^^^^^^^^^ property handleSearchSubmit. Property not found in 18: class SearchContainer extends 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. 我的类(class)设置看起来正确吗？
2. 为什么流程提示找不到属性handleSearchSubmit，并且与我的类名SearchContainer的名称也相同

Answer 1

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

Flow 正在询问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;