Question

我是reactjs的新手，我的json有一些嵌套数组，需要用条件复制静态标记，因为我循环通过json。

//当前代码

  button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // find string from edittext
            String lat1 = sLatitude1.getText().toString();
            // parse string to double
            lati1 = ParseDouble(lat1);
            String lon1 = sLongtiude1.getText().toString();
            longi1 = ParseDouble(lon1);
            String lat2 = dLatitude2.getText().toString();
            lati2 = ParseDouble(lat2);
            String lon2 = dLongtiude2.getText().toString();
            longi2 = ParseDouble(lon2);
            Log.i("**lat", lat2);
            CameraPosition place = CameraPosition.builder()
                    .target(new LatLng(lati1, longi1))
                    .zoom(3)
                    .bearing(6)
                    .tilt(45)
                    .build();
            flyTo(place);

            double xy1 = distanceBetween(new LatLng(lati1, longi1), new LatLng(lati2, longi2));
            String distanceis = formatNumber(xy1);
            textView.setText(distanceis);
            place1= new MarkerOptions().position(new LatLng(lati1,longi1))
                    .title("i am here").icon(BitmapDescriptorFactory.fromResource(R.drawable.bubble_mask));
            place2= new MarkerOptions().position(new LatLng(lati2,longi2))
                    .title("my destination").icon(BitmapDescriptorFactory.fromResource(R.drawable.bubble_mask));



            mMap.addPolyline(new PolylineOptions().geodesic(true)
                    .add(new LatLng(lati1, longi1))
                    .add(new LatLng(lati2, lati2)));
            // Add a listener for polyline clicks that changes the clicked polyline's color.
            mMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() {
                @Override
                public void onPolylineClick(Polyline polyline) {
                    // Flip the values of the red, green and blue components of the polyline's color.
                    polyline.setColor(polyline.getColor() ^ 0x00ffffff);
                }
            });
            mMap.addCircle(new CircleOptions()
                    .center(new LatLng(lati1, longi1))
                    .radius(5000)
                    .strokeColor(Color.GREEN)
                    .fillColor(Color.argb(54, 99, 255, 0)));
            mMap.addCircle(new CircleOptions()
                    .center(new LatLng(lati2, longi2))
                    .radius(5000)
                    .strokeColor(Color.BLUE)
                    .fillColor(Color.argb(54, 99, 255, 0)));
            mMap.addMarker(place1);
            mMap.addMarker(place2);
        }

    });


}
  // mehtod to parse double from string

double ParseDouble(String strNumber) {
    if (strNumber != null && strNumber.length() > 0) {
        try {
            return Double.parseDouble(strNumber);
        } catch (Exception e) {
            return -1;   // or some value to mark this field is wrong. or make a function validates field first ...
        }
    } else return 0;
}

// get distance
public static Double distanceBetween(LatLng point1, LatLng point2) {
    if (point1 == null || point2 == null) {
        return null;
    }
    double vw = SphericalUtil.computeDistanceBetween(point1, point2);
    Log.i("distance isby utillib ", String.valueOf(vw));
    return vw;
}

private String formatNumber(double distance) {
    String unit = "m";
    if (distance < 1) {
        distance *= 1000;
        unit = "mm";
    } else if (distance > 1000) {
        distance /= 1000;
        unit = "km";
    }

    return String.format("%4.3f%s", distance, unit);
}
@Override
public void onMapReady(GoogleMap googleMap) {
    mapReady = true;
   mMap = googleMap;}

//需要这样的东西，我可以在循环段上方和下方添加间隙div。

                    {
                      list.title
                        ? list.list.map(function (li, k) {
                          return (
                            <div key={k} className='row grid__row--offset--15'>
                              <div className='small-9 medium-7 large-6 columns border--solid--right-blue'>
                                <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p>
                              </div>
                              <div className='small-51 medium-52 large-53 columns medium-offset-1'>
                                <p className='text--font-size-14 paragraph--justified'>{li}</p>
                              </div>
                            </div>
                          )
                        })
                        : null
                    }

- 但这会产生语法错误

<div className='row grid__row--offset--20' />

Answer 1

试

{list.title && <div className='row grid__row--offset--20' />}
     {
              list.title &&
                list.list.map(function (li, k) {
                  return (
                    <div key={k} className='row grid__row--offset--15'>
                      <div className='small-9 medium-7 large-6 columns border--solid--right-blue'>
                        <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p>
                      </div>
                      <div className='small-51 medium-52 large-53 columns medium-offset-1'>
                        <p className='text--font-size-14 paragraph--justified'>{li}</p>
                      </div>
                    </div>
                  )
                })


            }
{list.title && <div className='row grid__row--offset--20' /> }

Answer 2

您收到语法错误，因为作为回报，您需要在{}中使用map函数并从三元运算中返回单个元素

{
                  list.title
                    ? <div><div className='row grid__row--offset--20' />
                    { list.list && list.list.map(function (li, k) {
                      return (
                        <div key={k} className='row grid__row--offset--15'>
                          <div className='small-9 medium-7 large-6 columns border--solid--right-blue'>
                            <p className='text--font-size-14 text--right'>{index + 1}.{j + 1}.{k + 1}</p>
                          </div>
                          <div className='small-51 medium-52 large-53 columns medium-offset-1'>
                            <p className='text--font-size-14 paragraph--justified'>{li}</p>
                          </div>
                        </div>
                      )
                    })
                    <div className='row grid__row--offset--20' /></div>
                    }
                    : null 
}

reactjs模板循环三元运算符和标记

2 个答案: