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

Question

我在 ReactJS 的返回语句中检测到无法访问代码的奇怪错误。

在下面给出的代码 sn-p 中，错误显示在带有按钮组件的 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

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 2

包含 Button 的 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 3

这是一个无效的代码...您已超出您正在使用的返回语句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>
    </>
  );
}