Question

我正在使用flow和React进行属性验证。

import React from 'react';


type Props = {
    requireField?: boolean,
    // inputType: React.PropTypes.oneOf(['text', 'number', 
    'email']).isRequired,
    title: string,
    name: string,
    extraClass?: string,
    controlFunc?: func,
    placeholder?: string,
};

const SingleInput = (props) => {

    var requireField;
    if( props.requireField ) {
       requireField = (<span className="text-error">*</span>);
    }

    return (
    <div className="form-group">
        <label className="form-label">{props.title} {requireField}</label>
        <input
            className={["form-control", props.extraClass].join(' ')}
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder} />
    </div>
    );
};

但是当我在我的应用程序中使用此组件时，它应该因错误的类型数据而生成错误：

<SingleInput
   requireField={true}
   inputType={'text'}
   title={20}           // -> this typed should generates error
   name={'first_name'}
   placeholder={'Your first name'} />

但我没有得到错误，似乎我错误地实施了它。我尝试了其他方法，如：

const SingleInput = (props: {title: string, .......}) => {

但是没有按预期工作，请让我知道我在我的代码中做了什么错？

我正在使用laravel-elixir以及以下包依赖项。

"devDependencies": {
    "axios": "^0.15.2",
    "babel-preset-react": "^6.24.1", // -> also holds "babel-preset-flow": "^6.23.0",
    "bootstrap": "4.0.0-alpha.6",
    "jquery": "^3.2.1",
    "laravel-mix": "^0.8.8",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
},

流程：必填字段未按预期工作

0 个答案: