reactjs中损坏的引导网格布局

Posted 2023-02-22

【中文标题】reactjs中损坏的引导网格布局

【英文标题】：broken bootstrap grid layout in reactjs

【发布时间】：2016-07-22 01:08:14

【问题描述】：

我使用 reactjs 进行视图和引导程序进行设计。我想要每行 3 列，但我的设计布局看起来很乱。网格布局被破坏。可能是什么原因？

我的 reactjs 代码

export default class RoomList extends React.Component
    constructor(props)
        super(props);
        this.state =  rooms: [] 
    

    componentDidMount()
        console.log('componentDidMount');
        this.loadRoomFromServer();
    

    loadRoomFromServer()
        $.ajax(
            url:'/api/v1/rental/',
            dataType:'json',
            success: (data) => 
                console.log('data',data);
                this.setState(rooms: data.objects);
                console.log('success');
              ,
              error: (xhr, status, err) => 
                console.error(url, status, err.toString());
              
            );
    

    render()
        let listOfRoom = this.state.rooms.map((room,id)=>
        return(
                <Rooms key=id
                slug = room.slug 
                name=room.listingName 
                price=room.price 
                property=room.property 
                gallery=room.gallery />
            );
    );
    console.log('listOfRoom',listOfRoom);

    return(
            <div className="hello">
                 <nav className="navbar navbar-default">
                  <div className="container-fluid">
                    <div className="navbar-header">
                      <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                      </button>
                      <a className="navbar-brand" href="#">Rental Space</a>
                    </div>

                    <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home <span className="sr-only">(current)</span></a></li>
                        <li><a href="/roomlist/">Space List</a></li>
                      </ul>
                      <ul className="nav navbar-nav navbar-right">
                        <li><a href="#">Add Space</a></li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <div className="container roomlist">
                    <div className="row">
                             listOfRoom 
                    </div>
                </div>
             </div>
        )
    


class Rooms extends React.Component
    render()
        console.log('this.props.slug',this.props.slug);
        let imageFile = this.props.gallery.map((image) => 
            return(
                    <img src=image.image className="img-fluid"   />
                );
        );

        return(
                <div className="col-md-4">
                    <div className="thumbnail">
                        <span className = "price">this.props.price Rs/Month</span>
                         imageFile[0] 
                    </div>
                    <h3 className="listingName text-left">
                     <a href =  "/rent/" + this.props.slug >this.props.name</a>
                    </h3>
                    <span className="propertySpan"> 
                        <i className = "fa fa-home"></i>
                        <span className="property">this.props.property</span>
                    </span>
                </div>
            )
    

我使用了 bootstrap v4。我做错了什么？

页面看起来像这样

【问题讨论】：

我建议在 render 函数中使用 React-Bootstrap for view 和 tables 来生成一致的结构。

【参考方案1】：

我没有代码，我必须对其进行更多研究，但我可以确定它不会在第一行之后生成一行，它需要这样才能使网格按照我的理解正常工作.

【讨论】：

我已经编辑了我的代码。您删除的大括号属于 RoomList 类右大括号。