React PropTypes: Cho phép các loại PropTypes khác nhau cho một prop


244

Tôi có một thành phần nhận được một chỗ dựa cho kích thước của nó. Prop có thể là một chuỗi hoặc một số ex: "LARGE"hoặc 17.

Tôi có thể cho React.PropTypes biết rằng đây có thể là cái này hay cái kia trong xác thực propTypes không?

Nếu tôi không chỉ định loại tôi sẽ nhận được cảnh báo: prop type `size` is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

Câu trả lời:


572
size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Tìm hiểu thêm: Đánh máy bằng PropTypes


Cảm ơn vì điều này, tôi gặp lỗi ngẫu nhiên khi chạy các bài kiểm tra Jest của mình, thiết lập Proptypes tĩnh trong các lớp: ReferenceError: oneOfType is not defined- có đề xuất nào không? Cảm ơn trước!!
Sara Inés Calderón

bạn có chắc bạn đã nhập đúng import PropTypes from 'prop-types';không?
Paweł Andruszków

này, đó là Pawel - vâng, đây là cách chúng tôi nhập chúng:import PropTypes from 'prop-types';
Sara Inés Calderón

1
2019 - sử dụng PropTypes.oneOf
Imdad

26

Đối với mục đích tài liệu, tốt hơn là liệt kê các giá trị chuỗi hợp pháp:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),

11

Điều này có thể làm việc cho bạn:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

1
Mặc dù mã này có thể trả lời câu hỏi, cung cấp ngữ cảnh bổ sung về lý do và / hoặc cách mã này trả lời câu hỏi cải thiện giá trị lâu dài của nó.
rollstuhlfahrer

-4
import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string

16
Đúng, PropTypes hiện đang sống trong gói riêng của mình, nhưng điều đó không trả lời câu hỏi ...
Kevin Amiranoff

1
Hoàn toàn không liên quan đến câu hỏi
jalooc
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.