ReactJS如果道具存在

此刻我收到一个错误，因为我从REST端点映射了一个对象数组，并且该数组中的一些对象没有特定的道具。ReactJS如果道具存在

一个例子是，我的一些对象内有另一个对象，称为images，有些则不。当我的React组件尝试渲染没有images的对象时，我留下了一个未定义prop的错误。

这里是我的组件呈现我的道具：

const VehicleDetail = (props) => { 
    return (
    <div className={"col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query vehicle-item " + props.vehicle.brand.name} data-value={props.vehicle.brand.name}> 
     <div className="vehicle-container"> 
     <img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + props.vehicle.offers[0].image.name} /> 
     <h4 className="vehicle-title"> 
      {props.vehicle.model.name} 
     </h4> 
     <div className="row-flex"> 
      <div className="col-flex-xs-12 btn-container"> 
      <a href={"http://beaver" + props.vehicle.brand.name + ".co.uk/new/cars/" + props.vehicle.slug} target="_blank" className="learn-more-btn">Learn More</a> 
      </div> 
     </div> 
     </div> 
    </div> 
); 
};

所以你可以看到我有一个img元素与props.vehicle.offers[0].image.name道具然而，这未能按我的一些对象没有可用此对象。

到目前为止，我已经尝试添加条件只是为了看看内联如果对象存在的第一但是这个失败，出现错误：

<img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + {if (typeof props.vehicle.offers[0].image.name == "object") { props.vehicle.offers[0].image.name }}} />

这里是我的组件，它在每个对象进行迭代，并且它们使我VehicleDetail组件：

// Vehicle List Component 
import VehicleDetail from './vehicle-detail.js'; 

// Create our component 
const VehicleList = (props) => { 
    // Just add props.vehicle to access API data instead of static 
    const RenderedVehicles = props.vehicles.map(vehicle => 
    <VehicleDetail key={vehicle.slug} vehicle={vehicle} /> 
); 

    return (
    <div className="row-flex center-xs"> 
     {RenderedVehicles} 
     {console.log(props.brandSelect)} 
    </div> 
); 
};

任何想法React JS的最佳实践是做什么的？谢谢

来源

2016-07-27 Nick Maddren

我会这样做。在您的车辆组件中声明一个可容纳缩略图url的变量。

const VehicleDetail = (props) => { 
    let vehicleThumbnail = ''; 

    if (props.vehicle.offers[0].image && props.vehicle.offers[0].image.name) { 
    vehicleThumbnail = props.vehicle.offers[0].image.name; 
    } 


    return (
    <div className={"col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query vehicle-item " + props.vehicle.brand.name} data-value={props.vehicle.brand.name}> 
     <div className="vehicle-container"> 
     <img src={vehicleThumbnail} /> 
     <h4 className="vehicle-title"> 
      {props.vehicle.model.name} 
     </h4> 
     <div className="row-flex"> 
      <div className="col-flex-xs-12 btn-container"> 
      <a href={"http://beaver" + props.vehicle.brand.name + ".co.uk/new/cars/" + props.vehicle.slug} target="_blank" className="learn-more-btn">Learn More</a> 
      </div> 
     </div> 
     </div> 
    </div> 
); 
};

我也会为其他道具做同样的事情。

来源

2016-07-27 08:34:27 Nazim

在渲染前检查优惠的长度。

{props.vehicle.offers.length > 0 ? (
    <img src={url + props.vehicle.offers[0].image.name} /> 
) : null}

来源

2016-07-27 08:35:45 vijayst

props.vehicle.offers[0] 5月正常情况下是这样的：

{ 
    image: { 
    name: 'hello' 
    } 
}

所以，你可以使用props.vehicle.offers[0].image.name没有任何错误。

但有些情况是：

{ 
    anotherProperty: { 

    } 
}

props.vehicle.offers[0].image是null，所以props.vehicle.offers[0].image.name等于null.name，其抛出的错误。

一个简单的方法来解决这个问题是这样的：

{ props.vehicle.offers[0].image && <img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + props.vehicle.offers[0].image.name} /> }

如果props.vehicle.offers[0].image是null，&&后声明将不会执行，但不返回任何渲染。

因此，当props.vehicle.offers[0].image不为空时，它会呈现img元素，从而防止发生错误。

来源

2016-07-27 08:36:15 huli

ReactJS如果道具存在

回答

相关问题