Redux-form、refをrenderFieldで使用する方法は？

Question

私はここにコードがあります...私の再来 - フォームフィールドのいずれかにREF属性を追加しようとしています：

let renderField = ({input, label, placeholder, type, meta: {submitFailed, touched, error, pristine}}) => 

    <div className={classNames("form-group", { 
    "has-danger": (submitFailed && error) || (!pristine && touched && error), 
    "has-success": !pristine && touched && !error 
    })}> 
    <textarea {...input} type={type} placeholder={placeholder} className={touched ? (error ? "form-control form-control-danger" : "form-control form-control-success") : "form-control"} /> 
    </div> 

.....私は「レンダリングFUNC

 <Field 
     name="message" 
     type="textarea" 
     component={renderField} 
     placeholder="Enter your message..." 
     validate={[required]} 
     ref="message" 
     withRef={true} 
     /> 

内次のエラーが発生しました：

Warning: Stateless function components cannot be given refs (See ref "renderedComponent" in renderField created by ConnectedField). Attempts to access this ref will fail 

refx-formフィールドにrefを追加するにはどうすればよいですか？

ありがとうございます。

Answer 1

機能の代わりにクラスを作成する必要があります。

import React, { Component } from 'react'; 

export default class RenderField extends Component { 
    render() {...} 
} 

Answer 2

エラーは、ステートフルコンポーネントを作成する必要があることを示しています。 React.Componentを拡張することでこれを行うことができます。既存の機能コンポーネントを変換する方法については、ドキュメントのthisを参照してください。