JSX：条件付きでインラインで要素を含める

Question

私はブートストラップ3を使用しており、12列が作成されたときにそれぞれ.rowをクリアしたいとします。しかし、私のコードは失敗し、私はこのエラーを受け取ります：

コンパイルに失敗しました。 ./src/File/file.js 構文エラーで エラー：予期しないトークン、期待、（145：56）この行で

：{ index % 4 == 0 && <div className="row"> }

const TweetImageList = ({images, removeImage}) => { 
    return (
     <div className="TweetImageList"> 

      <ReactCSSTransitionGroup transitionName="tweetImageTransition" 
            transitionEnterTimeout={500} 
            transitionLeaveTimeout={500}> 
       { 
        images.map((image, index) => { 
         let column = 
          <div key={index} className="col-xs-3 tweet-image-wrapper"> 
           <TweetImage 
            image={image} 
            removeImage={removeImage} 
           /> 
          </div>; 

         return column; 

        }) 
       } 
      </ReactCSSTransitionGroup> 

     </div> 
    ); 
}; 

そして、はい、それは必要ないくつかのIS BS文書のように「自己クリア」していないので、行をクリアする時間が必要です。ここをクリックしてください：https://stackoverflow.com/a/26445839/1736012

!!更新！

私はYo Wakitasの提案に従って自分のjsxを更新しました。浮動小数点数は行でクリアされるようになりました。しかし、トランジションはもう動作しません...任意のアイデア??????

const TweetImageList = ({images, removeImage}) => { 
    return (
     <div className="TweetImageList"> 

      { 
       _.chunk(images, 4).map((chunk, i) => { 
        return (
         <div key={i} className="row spacing-bottom"> 

          { 
           chunk.map((image, j) => { 
            return (
             <div key={j} className="col-xs-3"> 

              <ReactCSSTransitionGroup transitionName="tweetImageTransition" 
                    transitionEnterTimeout={500} 
                    transitionLeaveTimeout={500}> 
               <TweetImage 
                image={image} 
                removeImage={removeImage}/> 
              </ReactCSSTransitionGroup> 
             </div> 
            ) 
           }) 
          } 

         </div> 
        ) 
       }) 
      } 
     </div> 
    ); 
}; 

removeImage（）

removeImage(id) { 
    this.setState({ 
     images: this.state.images.filter(function (img) { 
      return img.id !== id; 
     }), 
     startValue: this.state.startValue + this.numPhotoChars 
    }); 
} 

Answer 1

Iはindex%4 === 0場合、その行に巻き付け要素を示す三成分、として書き込む示唆する。それ以外の場合は、divを表示せずにdivを表示します。長さ4の配列の配列へのあなたのコメントに基づいて、それはあなたのように見えるはずですチャンクあなたthis.state.photos、その上にマップ：

{this.state.photos.map((image, index) => { 
    const column = 
    <div className="col-xs-3"> 
     <TweetImage 
     image={image} 
     index={index} 
     key={'image-' + index} 
     removeImage={this.removeImage} 
     /> 
    </div>; 
    return (
    index%12 === 0 
    ? <div className="row"> 
     {column} 
     </div> 
    : {column} 
); 
    } 
)} 

編集。このようなIf you are already using lodash as a utility library, you can use the chunk function：

{_.chunk(this.state.photos, 4).map((chunk, i) => 
    <div className="col-xs-3"> 
     {chunk.map((image, j) => 
     <TweetImage 
      image={image} 
      index={j} 
      key={'image-' + i + '-' + j} 
      removeImage={this.removeImage} 
     /> 
    )} 
    </div> 
)} 

あなたはユーティリティライブラリを使用しない場合this.state.photosを仕切る独自の関数を作ることができます。 Theres multiple examples of that here.