reactjs - ReactJS 中的函数组件和返回语句

Question

我收到一个奇怪的错误，在 ReactJS 的 return 语句中检测到无法访问的代码。

在下面给出的代码片段中，错误显示在带有按钮组件的 div 处。

如何解决这个问题？

function RenderComments({ comments }) {
    return (
        comments.map((comment) =>
            <div>
                <ul className="list-unstyled">
                    <li className='font-quote'>{comment.comment}</li>
                </ul>
                <ul className="list-unstyled">
                    <li className='font-author'>--{comment.author}, {comment.date}</li>
                </ul>
            </div>
        )
        <div className = "row m-1" >
            <Button type="submit" value="submit"><i className="fa fa-pencil"></i> Submit Comment</Button>
        </div>   
    );
}   

Answer 1

这是一个无效代码...您已超出正在使用的 return 语句 row m-1 .

您需要使用<></>返回两个或多个元素的片段:

function RenderComments({ comments }) {
  return (
    <>
      {comments.map((comment) => (
        <div>
          <ul className="list-unstyled">
            <li className="font-quote">{comment.comment}</li>
          </ul>
          <ul className="list-unstyled">
            <li className="font-author">
              --{comment.author}, {comment.date}
            </li>
          </ul>
        </div>
      ))}

      <div className="row m-1">
        <Button type="submit" value="submit">
          <i className="fa fa-pencil"></i> Submit Comment
        </Button>
      </div>
    </>
  );
}