JSX：内联有条件地包含元素

Question

我正在使用 Bootstrap 3，并希望在创建 12 列后清除每个 .row。但是我的代码失败了，我得到了这个错误：

编译失败。 ./src/File/file.js 中的错误 语法错误：Unexpected token, expected , (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>
    );
};

是的，有时需要清除该行，因为它不像 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

我建议把它写成三元组，如果index%4 === 0，则显示行包裹元素。否则，显示没有行 div 的 div。

{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}
  );
  }
)}

编辑：根据您的评论，您似乎应该将您的 this.state.photos 分块为长度为 4 的数组数组，然后对其进行映射。 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.