javascript - 使用 Flow react 无状态函数组件

Question

第一次使用 Flow，我仍在尝试接受这一切。 既然 Header 是一个函数，它是否需要返回类型？

另外关于 Props，由于 logout 和 handleModalOpen 不接受任何参数，因此 () => void 是有效语法还是应该更改？

我觉得我已经掌握了 Flow 的窍门，但我想在犯任何重大错误之前确定一下。

// @flow
import * as React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';

type Props = {
  logout: () => void,
  handleModalOpen: () => void,
  isAuth: boolean,
}

const Header = (props: Props) => (
  <Navbar inverse fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to={props.isAuth ? '/dashboard' : '/'}>My Saved Recipes</Link>
      </Navbar.Brand>
      {props.isAuth && (
        <Navbar.Toggle />
      )}
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} onClick={props.handleModalOpen}>
          + Add Recipe
        </NavItem>
        {/* <LinkContainer to="/account">
          <NavItem eventKey={2}>
            Account
          </NavItem>
        </LinkContainer> */}
        <NavItem eventKey={3} onClick={props.logout}>
          Logout
        </NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

export default Header;

Answer 1

您不需要注释返回类型，但如果您想输入Header，我可能会这样做:

const Header: React$ComponentType<Props> = props => /* ...etc */

它将添加 Prop 要求。

就您的 props 而言，您应该根据您的期望输入这些函数。如果您期望一个不带参数且不返回任何内容的函数，那么您已经成功了。如果您希望它能够接受一个事件，那么您可能希望您的 props 接受该事件。