Question

我正在尝试利用Flow并使其与我的反应组件很好地协同工作。但是我得到了：

client / search-container.jsx：18 18：this.handleSearchSubmit = this.handleSearchSubmit.bind（本）; ^^^^^^^^^^^^^^^^^^ property handleSearchSubmit。在18中找不到属性：类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。问题：

我的班级设置看起来是否正确？
为什么流程抱怨找不到属性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;

Answer 2

Flow将类上的方法视为只读。因此，行


    RewriteEngine on
    RewriteCond %{SERVER_NAME} =www.example.com.br [OR]
    RewriteCond %{SERVER_NAME} =example.com
    RewriteRule ^ https://example.com%{REQUEST_URI} [END,QSA,R=permanent]

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

有几种解决方法可以解决这个问题。我通常这样处理它：

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

在课堂上找不到的属性 - Flow＆amp;应对

2 个答案: