Question

嗨，我是新来的反应者和自举代码...这是很酷的东西...但是我认为自举CSS有点令人困惑...

我正在尝试仅连续显示4张图像，用于“ n”张图像

这是我要重复使用的组件，以将图像添加到任何页面。

我可以通过单击“选择文件”按钮成功添加图像，但是它们是垂直堆叠的。

我尝试了几种不同的“ col-md-x”格式设置样式，但我只是不太想知道如何包装图像。

此外，我还要坚持使用“ col-md-1”，“ col-md-2”（等）的引导程序“ column” /“ row”格式化样式

我有与组件有关的以下文件：

FileDropZone.css

/* 
this simply hides the "no file chosen" and file name of the input button
*/
input[type='file'] {
color: transparent;
}

FileDropZone：

import './FileDropZone.css';

import React, { Component } from 'react';
import FileDropZoneFeed from './FileDropZoneFeed';

class FileDropZone extends Component {
constructor(props) {
    super(props);
    this.state = {
        files: null,
    }

    this.handleInputChange = this.handleInputChange.bind(this)
}


handleAddFile = (field, file) => {

    //console.log("handleAddFile");

    let temp = this.state[field] || [];
    temp.push(file);
    this.setState({[field]: temp});
}


handleInputChange(event){

    const input = event.target.files[0]

    if (!input) {
        // user has hit the cancel button
        return;
      }        

    let r = new FileReader();
    r.readAsDataURL(input);
    r.onload = (e) =>{

     this.handleAddFile("files", e.target.result);
    } 
}


render() {
    let inputSelector = (

        // simple choose file button
        <div>
            <input type="file" onChange={this.handleInputChange}/>
        </div>
    );

    let content = null;
    if(this.state.files !== null){
        content = (
            <FileDropZoneFeed files={this.state.files} />
            ); }

    return (
        <div className="container">
            {inputSelector}

            {content}
        </div>
        );} 
}
export default FileDropZone;

FileDropZoneFeed：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FileDropZoneItem from './FileDropZoneItem';

class FileDropZoneFeed extends Component {
render() {
const { files } = this.props;

return files.map((file, index) => (
  <FileDropZoneItem key={index} id={index} file={file} />
));
  }
    }

FileDropZoneFeed.propTypes = {
  files: PropTypes.array.isRequired,
};

export default FileDropZoneFeed;

FileDropZoneItem.js

import './FileDropZone.css';

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

class FileDropZoneItem extends Component {

render() {
const { id, file } = this.props;

return (
  <div>
    <div className="col-md-3">
      <img src={file} width="200" height="200"/>
    </div>
  </div>
  ); } 
}

FileDropZoneItem.propTypes = {
id: PropTypes.number.isRequired,
file: PropTypes.string.isRequired
};

const mapStateToProps = state => ({ });

export default connect(mapStateToProps)(FileDropZoneItem);

我希望将4张（或更少）图像放置在一行上，如果图像多于4张，则接下来的4张将向下卷到下一行（依此类推）

现在发生的是所有图像都是垂直堆叠的。

更新1：18 Jan 2019

根据帕特里克人的建议，从FileDropZoneItem渲染器中删除此“ ”，因此只需执行以下操作：

return (
  <div>
      <img src={file} width="200" height="200"/>
  </div>
  ); } 
}

这就是我现在得到的：

更新2：18 Jan 2019

尝试使用flex-container和flex-item的建议，这就是检查应用程序时看到的。我添加了两个“图像”（我取出了img对象，并用一个正方形代替了它），但是正如您所看到的，正方形仍在堆叠，但是好像flex-item一直贯穿页面吗？

更新3：18 Jan 2019

我使用了stever的关于CSS技巧的建议，并且只是从他们的一个flex网格演示和ta-da中复制了代码。我只需要将div更改为ul和ui元素

    <ul className="flex-container wrap">
          {content}
    </ul>

    <ul className="flex-item ">
      <img src={file} width="200" height="200"/>
    </ul>

这是结果，看起来不错：

Answer 1

也许引导不是最好的方法？引导程序可能笨拙且冗长。令我惊讶的是，flexbox的“ flexWrap”属性是针对这种情况而设计的。设置

Class

到样式对象，或

`flexDirection: "row", 
flexWrap: "wrap"`

在CSS中应该可以工作。

看看这个article。

如何自动限制每行4张图像？

1 个答案: