javascript - React JS lodash获得相同的功能

我想使用Lodash get在同一行显示字符串的两个对象？或者可以使用链（_.chain（vehicle）.get（'test'）。get（'test2））。

这是样本JSON文件

     {
      "results": [
        {
          "vehicle": {
            "plate_no": "ABC 1234",
            "model": "Toyota Innova"
          }
        }
      ]
    }

我正在使用Material-ui卡，我的代码如下所示。

  {_.map(this.state.vehicle, (d, idx) =>{
    return(
    <Col xs={6} style={{margin: '20px 0 5px' }}>
      <Card key={d.id}>
        <CardHeader
          avatar="http://lorempixel.com/100/100/nature/"
          title={_.get(d.vehicle, 'model') - _.get(d.vehicle, 'plate_no')}
          actAsExpander={true}
          showExpandableButton={true}
          style={{backgroundColor: Colors.grey200}}
        />

我的目标是显示标题如下。

丰田Innova-ABC 1234

最佳答案

您可以按需要的顺序将_.at()与所需属性的数组一起使用，然后Array＃join它们：

const d = {
  "vehicle": {
    "plate_no": "ABC 1234",
    "model": "Toyota Innova"
  }
};

const result = _.at(d.vehicle, ['model', 'plate_no']).join(' - ');

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

您可以使用简单的解构（未测试代码）来代替使​​用lodash：

  {_.map(this.state.vehicle, ({ vehicle: { model, plate_no } }, idx) =>{ // destructure the vehicle object
    return(
    <Col xs={6} style={{margin: '20px 0 5px' }}>
      <Card key={d.id}>
        <CardHeader
          avatar="http://lorempixel.com/100/100/nature/"
          title={`${model} - ${plate_no}`} // use the destructured props
          actAsExpander={true}
          showExpandableButton={true}
          style={{backgroundColor: Colors.grey200}}
        />

关于javascript - React JS lodash获得相同的功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45581472/