如何在功能组件中正确使用PropType

时间:2020-02-05 00:28:29

标签: reactjs react-functional-component

在我的具有API数据的React函数组件中,我添加了PropTypes,但似乎没有真正起作用,或者至少我不知道应该如何使用。

这是我做的:

const Home = () => {
  const dispatch = useDispatch();
  const { profiles } = useSelector(state => ({
    profiles: state.ProfileReducer.profiles
  }));

  useEffect(() => {
    dispatch(ProfileMiddleware.getOneProfile(USERNAME));
  }, [dispatch]);

  return (
    <>
      <Jumbotron>
        <Container>
          <Row>
            <Col md={6}>
              <Image src={profiles.imageUrl} alt="profile" roundedCircle />
            </Col>
            <Col md={6}>
              <h1>{profiles.firstname + " " + profiles.surname}</h1>
              <h4>{profiles.title}</h4>
              <h5>{profiles.area}</h5>
              <p>{profiles.email}</p>
              <p>{profiles.bio}</p>
            </Col>
          </Row>
        </Container>
      </Jumbotron>
    </>
  );
};

Home.propTypes = {
  profiles: PropTypes.string
};

export default Home;

我也在上面文件的顶部导入了PropTypes,并尝试添加在文档中看到的props,但是我不确定它是如何工作的。 为了测试,我添加了bool而不是string,但实际上没有出现错误。 我不知道该如何在这里实际使用它。

0 个答案:

没有答案