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文档暗示的那样“自我清理”。请在此处阅读：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.

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

1 个答案: