Question

我正在构建一个带有render函数的react组件，该组件应该返回将使用element-ui的布局方案设置样式的帖子列表。返回的元素应该最终看起来像这样：

render(){
   return <Layout.Row gutter="20">
          <Layout.Col span="6"><Post id=1/></Layout.Col>
          <Layout.Col span="6"><Post id=2/></Layout.Col>
          <Layout.Col span="6"><Post id=3/></Layout.Col>
          <Layout.Col span="6"><Post id=4/></Layout.Col>
        </Layout.Row>
}

我正在尝试通过将状态中列出的帖子映射到列来实现此目的。

编辑：更新了类以消除错字并更新了错误消息

class PostList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            posts: [{id: 1}, {id: 2}]
        };
    }
    render(){
        let posts = this.state.posts.map((post, index)=>{
            var el = <Layout.Col span="6">{post.id}</Layout.Col>;
            var result
            if(index%4===0){
                result=<Layout.Row>{el}

            }
            if((index+1)%4===0){
                result={el}</Layout.Row>
            }
            return result
        });
        return (
                <div>{posts}</div>
        );
    }
}

但这无法编译：

 Line 20:  Parsing error: Unterminated regular expression

  18 |      }
  19 |      if((index+1)%4===0){
> 20 |          result={el}</Layout.Row>
     |                       ^
  21 |      }
  22 |      return result
  23 |  });

有人可以帮我弄清楚如何使用React实现这种格式吗？

Answer 1

您需要将列组件包装在行中：

let posts = this.state.posts.map((post, index)=>{
            var el = <Layout.Col span="6">{post.id}</Layout.Col>; //here col to Col
            if(index%4===0){
                return <Layout.Row>{el}</Layout.Row> //here

            }
            if((index+1)%4===0){
                return <Layout.Row>{el}</Layout.Row> //and here
            }

        });

编辑：

在注释之后，简化代码和修复错误的最简单方法可能是：

let posts = <Layout.Row>
  {
    this.state.posts.map((post)=> (
      <Layout.Col span="6">{post.id}</Layout.Col>
    ))
  }
  </Layout.Row>;

Answer 2

您有错字：

 <Layout.Col span="6">{post.id}</Layout.col>;

应该是

 <Layout.Col span="6">{post.id}</Layout.Col>;

Answer 3

我想问题是您写了</Layout.col>而不是</Layout.Col>。

编辑：

根据您的评论，代码应如下所示：

render() {
  const { posts } = this.state;
  const cols = posts.map(post => <Layout.Col span="6">{post.id}</Layout.Col>);
  const columnsPerRow = 4;
  const rows = [];
  for (let i = 0; i < cols.length; i += columnsPerRow) {
    let cols = cols.slice(i, i + columnsPerRow);
    rows.push(<Layout.Row>{cols}</Layout.Row>);
  }
  return <div>{rows}</div>;
}

动态生成的React组件上缺少结束标记

3 个答案: