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

Question

我正在使用 Bootstrap 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>
    );
};

是的，有时有必要清除该行，因为它不像 BS 文档所暗示的那样 "self clearing"。阅读此处：

！！更新!!

我根据 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。

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

JSX: inline conditionally include element

twitter-bootstrap

reactjs

twitter-bootstrap-3

react-jsx