Question

我具有以下代码库，并且能够成功地为正在传递的道具指定类型

// @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`. 我该如何解决？

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

Answer 1

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

像this。

最小示例：

// @flow
import React from 'react';

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

export default SignIn;

我不知道您想成为setDisplayScreen的确切类型，您可能想更改它。

道具缺少类型注释

1 个答案: