Question

我正在从我的API中检索帖子列表，我想对它们进行排列，例如->

<Row>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
    <Col><Card.......></Col>
<Row>

我环顾四周，发现了一些示例，但是对于ReactJS来说我还是太陌生，或者对于我来说它们根本不起作用。

这是我班上现在的样子->

class ApiPosts extends Component {
    constructor() {
        super();
        this.state = {
            blogPosts: [],
        };
    }

    componentDidMount() {
        const { classes } = this.props;

        fetch('http://localhost:53595/api/public/posts', {
            method: 'get',
        })
            .then(results => {
                return results.json();
            }).then(data => {
                let blogPosts = data.map((post, index) => {
                    if (post.type === "News") {
                        if ((index % 4) === 0) {
                            return (
                                <Col xs >
                                    <Card className={classes.card} key={post.id}>
                                        <CardActionArea>
                                            <CardMedia
                                                component="img"
                                                alt={post.title}
                                                className={classes.media}
                                                height="140"
                                                image={post.imageName}
                                                title={post.title}
                                            />
                                            <CardContent>
                                                <Typography gutterBottom variant="headline" component="h2">
                                                    {post.title}
                                                </Typography>
                                                <Typography component="p">
                                                    {post.body}
                                                </Typography>
                                            </CardContent>
                                        </CardActionArea>
                                        <CardActions>
                                            <Button size="small" color="primary">
                                                Share
                                            </Button>
                                            <Button size="small" color="primary">
                                                Learn More
                                    </Button>
                                        </CardActions>
                                    </Card>
                                </Col>
                            )
                        }
                    }
                });
                this.setState({ blogPosts: blogPosts });
                //console.log("state", this.state.blogPosts);
            })
    }
    render() {

        return (
            <React.Fragment>
                <Col xs />
                {this.state.blogPosts}
            </React.Fragment>

        )
    }
}

有什么方法可以使用map来实现吗？很抱歉，我的新手问题仍在学习ReactJS。提前非常感谢！

Answer 1

首先，根据要放置它们的row对项目进行分组，然后遍历分组的数据并每行呈现4个项目。请考虑以下代码段

使用reduce方法创建组数据

componentDidMount() {
  ...
  .then(data => {
     var grouped = data.reduce((acc, post, ind) => {
       var index = parseInt(ind / 4);
       acc[index]= acc[index] || []; 
       acc[index].push(<Col > /*Column definition goes here*/ </Col>);
       return acc;
     }, {});
     this.setState({ grouped });
  });
}

拥有分组数据后，可以按以下方式呈现

render() {
  const { grouped } = this.state;
  return (
    <React.Fragment>
      {
        Object.keys(grouped).map(row => {
          return (
            <Row>
            {
              grouped[row]
            }
            </Row>
          );
        })
      }
    </React.Fragment>
  );
}

希望这会有所帮助！

Answer 2

假设您有一个父组件：

class Container extends Component{
    render(){
        return(
            <Row> </Row>
        ) 
    }
}

现在假设您已经有一组项目，则可以将每个项目映射到新列并在row中呈现它们：

class Container extends Component{
    render(){
        const items = this.state.items.map(item => (<Col md={3}>{item.name}</Col>))
        return(
            <Row>{items}</Row>
        ) 
    }
}

ReactJS如何连续渲染4个项目（来自api的项目）

2 个答案: