为什么Flow会报告我的React组件与字符串不兼容？

Question

我有一个包含较大形式的输入组件，并且Flow引发以下错误。

Cannot instantiate React.Element because class UploaderInput [1] is incompatible with string [2] in type argument
ElementType.

     src/components/provider/signout/SignoutNoteForm.jsx
     108?               />
     109?             </div>
     110?             <div>
     111?               <UploaderInput
     112?                 dropInstructions="Drop files to attach to this signout or click to browse"
     113?                 error={errors}
     114?                 files={values.files}
     115?                 name="files"
     116?                 onChange={value => setFieldValue(`files`, value)}
     117?                 onUploadingStart={startUploading}
     118?                 onUploadingComplete={stopUploading}
     119?                 s3Url={s3Url}
     120?                 title="Upload Files"
     121?                 touched={touched}
     122?                 uploadOptions={uploadOptions}
     123?               />
     124?               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125?             </div>
     126?             <div>

     /private/tmp/flow/flowlib_1e7d8b2/react.js
 [2] 170?   | string

     src/components/form/UploaderInput.jsx
 [1]  98? export default class UploaderInput extends Component<Props, State> {

这不是我唯一的输入组件，其他任何组件都没有问题。这条不透明的消息是什么意思，解决该问题的方法有哪些？

Answer 1

原来，这是我Props和我defaultProps的UploaderInput类型之间的不匹配。

该命令：

flow check --show-all-branches

使它更加清晰，是将来调试的一个好技巧。

Cannot instantiate React.Element because in type argument ElementType:
 • Either class UploaderInput [1] is incompatible with string [2].
 • Or null [3] is incompatible with string [4].

     components/provider/signout/SignoutNoteForm.jsx
     108?               />
     109?             </div>
     110?             <div>
     111?               <UploaderInput
     112?                 dropInstructions="Drop files to attach to this signout or click to browse"
     113?                 error={errors}
     114?                 files={values.files}
     115?                 name="files"
     116?                 onChange={value => setFieldValue(`files`, value)}
     117?                 onUploadingStart={startUploading}
     118?                 onUploadingComplete={stopUploading}
     119?                 s3Url={s3Url}
     120?                 title="Upload Files"
     121?                 touched={touched}
     122?                 uploadOptions={uploadOptions}
     123?               />
     124?               <ErrorMessage message={touched.files && errors.files ? errors.files : ''} />
     125?             </div>
     126?             <div>

     /private/tmp/flow/flowlib_2ba42473/react.js
 [2] 170?   | string

     components/form/UploaderInput.jsx
 [4]  81?   title: string,
        :
 [1]  98? export default class UploaderInput extends Component<Props, State> {
        :
 [3] 107?     title: null,