javascript - 动态生成 React 组件时缺少结束标记

Question

我正在构建一个带有渲染函数的 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

您有一个拼写错误:

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

应该是

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