Reactjs 非常简单的属性映射无法正确传递变量

我是一个新的反应者，实际上无法解决这个非常简单的问题。我只想将'reviews'变量（声明自

const reviews=reviews

）传递到

AllReviews

组件中，并将每个评论输出到页面

但是，我在我的应用程序中看到此错误：

AllReviews.js中的错误（4:12）
';' 预料之中

我有几个问题：

通过审查道具时（即

或参见下文-索引：

import React, { Component } from "react";
import { render } from "react-dom";
import ReviewsLeftArea from "./ReviewsLeftArea";
import ReviewsRightArea from "./ReviewsRightArea";
import AllReviews from "./AllReviews";
import "./style.css";
import "./fontawesome.min.css";
import Reviews from "./reviews.json";

const reviews = Reviews;

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div id="reviews-area-inner">
        <ReviewsLeftArea />
        <ReviewsRightArea />
        <AllReviews reviews={reviews} />
      </div>
    );
  }
}

render(<App />, document.getElementById("reviews-area-wrap"));

AllReviews组件：

import React from "react";

export default function AllReviews(props) {
  render() {
    return (
      <div id="all-reviews">
        {props.reviews}.map(review => (
          <div>
            <span>
              <b>Name:</b> {review.name}
            </span>
            <span>
              <b>Comments:</b> {review.comment}
            </span>
            <span>
              <b>Rating:</b> {review.rating}
            </span>
          </div>
        ))
      </div>
    );
  }
}

从“React”导入React；
导出默认功能AllReviews（道具）{
render（）{
返回(
{props.reviews}.map（review=>(
名称：{review.Name}
评论：{review.comment}
评级：{review.Rating}
))
);
}
}

任何建议都会非常有用。感谢您在这里提供的帮助。正确的语法是：

<AllReviews reviews={reviews} />



2和3:AllReviews组件是一个功能组件，功能组件中没有呈现函数。请删除呈现（）{}，只保留返回（）
1:正确的语法是：

<AllReviews reviews={reviews} />



2和3:您的AllReviews组件是一个功能组件，功能组件中没有呈现函数。请删除呈现（）{}并保留返回（）
这里的问题是您正在功能组件中使用呈现方法。它必须如下所示：

import React from "react";

const AllReviews = (props) =>  (
      <div id="all-reviews">
        {
        props.reviews.map((review) => (
          <div>
            <span>
              <b>Name:</b> {review.name}
            </span>
            <span>
              <b>Comments:</b> {review.comment}
            </span>
            <span>
              <b>Rating:</b> {review.rating}
            </span>
          </div>
        ))
       }
      </div>
    );


export default AllReviews;

从“React”导入React；
const AllReviews=（道具）=>(
{
道具.评论.地图（（评论）=>(
名称：{review.Name}
评论：{review.comment}
评级：{review.Rating}
))
}
);
导出默认评论；
这里的问题是在功能组件中使用渲染方法。它必须是这样的：

import React from "react";

const AllReviews = (props) =>  (
      <div id="all-reviews">
        {
        props.reviews.map((review) => (
          <div>
            <span>
              <b>Name:</b> {review.name}
            </span>
            <span>
              <b>Comments:</b> {review.comment}
            </span>
            <span>
              <b>Rating:</b> {review.rating}
            </span>
          </div>
        ))
       }
      </div>
    );


export default AllReviews;

从“React”导入React；
const AllReviews=（道具）=>(
{
道具.评论.地图（（评论）=>(
名称：{review.Name}
评论：{review.comment}
评级：{review.Rating}
))
}
);
导出默认评论；
{props.reviews}.map
->
props.reviews.map
我仍然收到错误
{props.reviews}.map
->
props.reviews.map
我仍然收到错误谢谢-但是为什么你必须更改const-AllReviews=（props）=>（为了让它工作？我想了我的函数AllReviews（props）行可以工作吗？我不认为这是严格必要的，但我正在编写您的代码片段，所以我只是在尝试！函数也应该可以。谢谢-但为什么您必须更改const AllReviews=（props）=>（以使其工作？我认为我的函数AllReviews（props）行可以工作吗？我不认为这是严格必要的，但我正在编写您的代码片段，所以我只是在尝试！函数也应该可以。