React Map Operator

时间:2019-02-18 16:03:39

标签: javascript reactjs jsx

我正在尝试声明一个变量“ ratingVal”,该变量在地图运算符内部分配为随机no。我想在评分组件中使用该变量,并将其显示在屏幕上。但是我得到一个错误

  

解析错误:意外的令牌

在这种情况下声明变量的正确语法是什么?

renderProductsCardsList(products){

   return products.map(
     (product, i) =>

       let ratingVal = Math.floor(Math.random() * 5) + 1
       <Rating initialRating={ratingVal} readonly></Rating>
       <div>{ratingVal}</div>
   )
}

3 个答案:

答案 0 :(得分:3)

您不能在带有隐式返回的箭头函数中包含声明语句。为此,请使用显式的返回语法。同样,您不能从map方法内返回多个元素。将它们包装在<React.Fragment>中:

renderProductsCardsList(products){
   return products.map(
     (product, i) => {
       let ratingVal = Math.floor(Math.random() * 5) + 1
       return (
            <React.Fragment>
                <Rating initialRating={ratingVal} readonly></Rating>
                <div>{ratingVal}</div>
             </React.Fragment>
       )
   })
}

或在分配时进行评估

renderProductsCardsList(products){
   return products.map(
     (product, i) => 
            <React.Fragment>
                <Rating initialRating={Math.floor(Math.random() * 5) + 1} readonly></Rating>
                <div>{ratingVal}</div>
             </React.Fragment>
   )
}

答案 1 :(得分:1)

两个问题:

  • 在箭头clear all; clc; abstol = 1e-10; #default = 1e-10 reltol = 1e-06; #default = 1e-06 n = 2; tol_up = 0.999; tol_bottom = 0.000001; rb = 2.20; hhh= 180e-9; ppp = 0.5; lambda = 40e-9; www = linspace(50e-9,2049e-9,n); for i = 1:n # limit for theta p2 = pi*tol_up; p1 = pi*tol_bottom; # limit for phi phi_2 = @(x,y) atan(x./(hhh-y)) + (pi/2); phi_1 = @(x,y) atan((hhh-y)./(www(i)-x)); # limit for y p6 = hhh*tol_up; p5 = hhh*tol_bottom; # limit for x p8(i) = www(i) .* tol_up; p7(i) = www(1) .* tol_bottom; f1 = @(x, y, phi, theta) exp(-(hhh-y) ./ (lambda .* sin(theta) .* sin(phi))); f3 = @(x, y, phi, theta) sin(theta).* cos(theta).^2 .* (1 - f1(x, y, phi, theta)); q1a = @(x, y, phi) quadcc(@(theta) f3 (x, y, phi, theta), p1, p2); q1b = @(x, y) quadv(@(phi) q1a(x, y, phi), phi_1(x,y), phi_2(x,y)); q1c = @(x) quadv(@(y) q1b(x, y), p5, p6); [q1d(i)] = quadv(@(x) q1c(x), p7(i), p8(i)); ratio_FS1x(i) = 1 *3 / (4*pi*hhh*www(i)) * q1d(i); [q1(i)] = integral( @(x) (integral3( @(y, phi, theta) f3(x, y, phi, theta), p5, p6, @(y) phi_1(x,y), @(y) phi_2(x,y), p1, p2, 'AbsTol',abstol, 'RelTol',reltol)), p7(i), p8(i), 'ArrayValued',true); ratio_FS1(i) = 1 *3 / (4*pi*hhh*www(i)) * q1(i); end; 之后没有括号:如果仅在一行中执行隐式返回,则只能省略括号。
  • 在您的代码中浮动JSX:我不确定您要做什么。 =>方法的末尾有2行JSX。您目前不退货。但是我想您想返回一个map组件。

    Rating

答案 2 :(得分:-1)

使用函数在map函数中返回产品:

function renderProductsCardsList(products) {
    let rating = () => {
        let ratingVal = Math.floor(Math.random() * 5) + 1
        return (<>
            < Rating initialRating={ratingVal} readonly ></Rating >
            <div>{ratingVal}</div>
        </>)
    }
    return products.map(product => rating())
}