Question

第一次使用Flow和Im仍然试图全力以赴。由于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

您可能希望在此处返回react元素检查以获取更多信息https://github.com/facebook/flow/blob/9e2651b7dd0c632d42dd740dc4b9be0700371e89/lib/react.js

Answer 2

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

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

它将添加道具要求。

就您的props而言，您应该根据自己的期望输入这些功能。如果您期望一个不带参数的函数并且什么也不返回，那么您已经将它钉在了一起。如果你想要它，可以参加一个活动，那么你可能希望你的props接受它。

使用Flow来反应无状态函数组件

2 个答案: