Reactでは、折り返しdivを必要とせずに変数を宣言する方法は？

Question

私は現在持っている：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) => 
    <div> 
    <label>{label}</label> 
    <Form.Input {...input} type={type} placeholder={'name@example.com'} /> 
    {touched && error && <span className="form-control-feedback">{error}</span>} 
    </div> 

どのように私はDIVの周囲には必要としないように上記を更新することができます？のようなもの：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) => 
    <label>{label}</label> 
    <Form.Input {...input} type={type} placeholder={'name@example.com'} /> 
    {touched && error && <span className="form-control-feedback">{error}</span>} 

を感謝

Answer 1

あなたが反応のいずれかのバージョンを使用している場合バージョン16より前のバージョンでは、各コンポーネントは1つの要素のみを返さなければならないため、これを実行することはできません。あなたが/ React 16へのアップグレードを使用する場合、あなたの質問であなたが何を求めているか、つまり、コンポーネントから文字列や数字の配列を返すことができます。

はhttps://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-stringsを参照してください

Answer 2

あなただけの配列を返すことができます：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) => 
    [ 
    <label>{label}</label> 
    <Form.Input {...input} type={type} placeholder={'name@example.com'} /> 
    {touched && error && <span className="form-control-feedback">{error}</span>} 
    ] 

をしかし、あなたはまだ、あなたのrenderメソッドから単一のコンポーネントを返却する必要がありますので、例えば、renderEmailFieldがある場合トップレベルレンダリングコンポーネントの場合は、まだ<div>にラップする必要があります。

render() { 
    return (
    <div> 
     {this.renderEmailField()} 
    </div> 
) 
} 

rendering arrays of componentsをサポートするReact 16に更新しない限り、

Answer 3

あなたの質問は答えはノーであるCan you return multiple values from a function in Javascript?

に沸きます。あなたの関数では、html要素の1つの値しか返せません。周辺はdivが必要です。

React 16では、他の回答に記載されているように配列を返すサポートが追加されました。