Question

从后端获取数据后。我想在引导网格中呈现数据，但是在reactjs中，如果您打开例如（）的元素，您将等不到3次出现以关闭div。这是关于我的问题的代码示例

export default class Posts extends Component {
    state = {
        posts: []
    }

    componentDidMount() {
        fetch(`https://jsonplaceholder.typicode.com/posts`)
            .then(response => response.json())
            .then(json => {
                this.setState({ posts: json })
            })
    }

    renderPosts() {
        const { posts } = this.state;

        if (posts.length > 0) {

            posts.map((post, index) => {

                // This is my issue here

                if (index === 0) {

                    return (<div className="row">

                        <div> className="col-sm">{post.title} </div>)

                } else if (index % 5 === 0) {


                    return (</div className="row">
                        <div className="row">
                        <div> className="col-sm">{post.title} </div>)

                } else {
                    return (<div> className="col-sm">{post.title} </div>)
                }

            })

        } else {
            return null;
        }
    }

    render() {
        return (
            <div>{this.renderPosts()}</div>
        )
    }
}

Answer 1

我通过将数据分组为一个数组来解决了这个问题。数组代表行。在它内部的代表列的数组。

const RowPostGroups = [];
            for (let i = 0; i < photos.length; i = i + 5)
                RowPostGroups.push(photos.slice(i, i + 5));
// then map for rows
// then map for columns

如何在ReactJS中使用地图渲染数组的引导网格

1 个答案: