时间戳

首页 > 解决方案 > 缺少道具的类型注释

reactjs - 缺少道具的类型注释

问题描述

我有以下代码库，并且能够成功地为传递的道具提供类型

// @flow
import React from 'react';
import PropTypes from 'prop-types';
import { signin } from '../../assets/images';
import PinkButton from '../shared/button-color-pink';
import Input from '../shared/Input-field';
import ImageDiv from '../shared/Image-div';
import FormDiv from '../shared/Sign-in-div';
import { NunitoItalic18, Nunito20 } from '../shared/nunito/nunito';
import ImageContainer from '../shared/image-container';

const SignIn = props => (
  <div style={{ display: 'flex' }}>
    <ImageContainer>
      <ImageDiv bg={signin} src={signin} alt="logo" />
    </ImageContainer>
    <FormDiv>
      <Input style={{ marginTop: 44 }} placeholder="Username" />
      <Input style={{ marginTop: 44 }} placeholder="Password" />
      <PinkButton style={{ marginTop: 45, width: 100 }}>Sign in</PinkButton>
      <NunitoItalic18 style={{ marginTop: 60 }}>
        Forgot username or password
      </NunitoItalic18>
      <Nunito20
        style={{ marginTop: 187, cursor: 'pointer' }}
        onClick={() => props.setDisplayScreen('SignUpOptions')}
      >
        Don’t have an account? Sign up
      </Nunito20>
    </FormDiv>
  </div>
);

SignIn.propTypes = {
  setDisplayScreen: PropTypes.func.isRequired,
};

export default SignIn;

当我运行纱线流时，它给了我以下错误：我该Missing type annotation for `props`. 如何解决这个问题？

似乎流程可能有反应问题？

标签： reactjsflowtype

解决方案

您需要为组件的 props 添加类型注释。

像这样。

最小的例子：

// @flow
import React from 'react';

const SignIn = (props: {| setDisplayScreen: (string) => mixed |}) => (
  <div style={{ display: 'flex' }}  onClick={() => props.setDisplayScreen('SignUpOptions')}>
  </div>
);

export default SignIn;

我不知道你到底setDisplayScreen想成为什么样的人，你可能想改变它。

推荐阅读