ReactNativeでの単一のreturnについて

Question

ReactNaitiveで関数を用意して単一のタグをreturnしたいです。
このようなことはできないのでしょうか。

mapを使ってループしている処理があるのですが、
この中で中身によってViewのスタイルを変更したいです。

個別に書くと長くなるため、
単一のタグだけ返すような関数を用意したいです。

　// これだとエラーがでる
  test1(){
    return (<View>)
  }

  // タグを閉じるとエラーがでない
  test1(){
    return (<View></View>)
  }

Error: TransformError SyntaxError:＊＊＊＊＊＊: Unexpected reserved word 'let' (355:4)

Answer 1

単一のタグだけを返すのは不可能です。

もしスタイルを変更したいだけなら、以下のようにスタイルを変更するのはどうでしょうか？

import React, { Component } from 'react';
import {View} from 'react-native';

export default class App extends Component {
  render() {
    let colorList = ["red","yellow","blue"]
    return (
      <View>
        {colorList.map(c => {
          return(
　　　　　　　//colorListの値をcに代入してその値に応じて背景色を変更している
            <View style={{width:100,height:100,backgroundColor:c}}/>
          )
        })}
      </View>
    );
  }
}

Comments

[momiji0210]

返信おそくなって申し訳ないです。
ご回答ありがとうございます。確かに単一ならその方法が一番キレイそうですね。
こちら発想がなかったので助かりました。

やりたかったこととして、２つのViewおきにflexDirection: 'row'で囲みたかったです。
そのため、mapを使った方法ではできず、Viewで締めるタイミングを制御したかったです。

Viewがn個ある
1 2
3 4
5 6
n
みたいな感じの配列にしたかったため、かなりややこしくなってしまいました。

[maisumakun]

lodashの_.chunk（https://lodash.com/docs/4.17.11#chunk）のような関数を使って、2個セットになった配列を作る、という方法が考えられます。

Answer 2

以下の感じでいけるかと思います！

test1(){
    return <View />;
}

Comments

[momiji0210]

こちらありがとうございます。
コメント頂いた方法だと、閉じるタグを入れない場合エラーがでてしまいます。
this.test1() // <View>
this.renderhoge()
this.renderhoge()
this.test2() // <View />

みたいなことをやりたいため、閉じる場所を明示したいです。