Return 元素数量取决于数组维度

Question

我有一个可变尺寸排列。

如何在没有这么多条件的情况下显示或return 与数组维数相等的数据元素数量。因为，首先，布置的尺寸是未知的。这可能有 1 或 100 等维度

const Elements = (props:{arrangement:any}) = > {

  if (arrangement.length==1){
   return(
     <Data name={arrangement[0][0]} last_name={arrangement[0][1]} ></Data >
   )
  }
  if (arrangement.length==2){
   return(
     <Data name={arrangement[0][0]} last_name={arrangement[0][1]} ></Data >
     <Data name={arrangement[1][0]} last_name={arrangement[1][1]} ></Data >
   )
  } 
  // ......
  if (arrangement.length==10){
   return(
     <Data name={arrangement[0][0]} last_name={arrangement[0][1]} ></Data >
     <Data name={arrangement[1][0]} last_name={arrangement[1][1]} ></Data >
      ..........
     <Data name={arrangement[9][0]} last_name={arrangement[9][1]} ></Data >
   )
  } 

}

////////////////////////////////////////// /////////// 添加

const ExploreContainer  = (props:{arreglo:any}) => {

  useEffect(() => {

    console.log(props.arreglo)
   
  }, []);

  return (

    <div >
      <Elements arragement={props.arreglo} />
    </div>
   
  );
};

const Elements = (props:{ arrangement: Array<any> }) => {

  return (
  
  props.arrangement.map((a) => {

     <CardExamples item={a[0]} nombre={a[1]} distancia={a[2]} dias={a[3]} hora_ini={a[4]} hora_fin={a[5]} calificacion={a[6]}></CardExamples>  

    })
    )
}

const CardExamples= (props:{item: React.ReactNode, nombre: React.ReactNode, distancia: React.ReactNode, dias: React.ReactNode,
  hora_ini: React.ReactNode, hora_fin: React.ReactNode, calificacion: React.ReactNode  }) => {
   return (
    <IonCard>
          <IonCardHeader>
            <IonCardTitle>{props.nombre}</IonCardTitle>
            <IonCardSubtitle>{props.item}</IonCardSubtitle>
            <IonItem> CALIFICACIÓN: {props.calificacion} </IonItem>
          </IonCardHeader>
          <IonItem>
            <IonLabel>Imagen de servicio</IonLabel>
          </IonItem>
      <IonCardContent>"Descripcion"</IonCardContent>
      <IonItem><IonButton fill="outline" slot="end">View</IonButton></IonItem>

    </IonCard>
       
  );
};

////////////////////////////////////////// ///////////////////////////

新建

这显示了第一个元素

const Elements = (props:{ arrangement: Array<any> }) => {
    return(
      <div className="container-principal">
             <CardExamples item={props.arrangement[0]} nombre={props.arrangement[1]} distancia={props.arrangement[2]} dias={props.arrangement[3]} hora_ini={props.arrangement[4]} hora_fin={props.arrangement[5]} calificacion={props.arrangement[6]}></CardExamples>  

  </div>

    )
}

但这并没有显示任何内容：

const Elements = (props:{ arrangement: Array<any> }) => {

return (
    <div className="container-principal">
    {
  props.arrangement.map((a) => {
     <CardExamples item={a[0]} nombre={a[1]} distancia={a[2]} dias={a[3]} hora_ini={a[4]} hora_fin={a[5]} calificacion={a[6]}></CardExamples>  
     console.log(a[0])

    })
  }
  </div>
    )
}

为什么可以？

Answer 1

通过查看您提供的示例代码，我建议您使用现代 TS/JS 映射函数将您的数据正确映射到上面的结果中。

您可以对代码进行以下修改：

// First, looks like you have a syntax bug here that, should look like this
const Elements = (props:{ arrangement: Array<any> }) => {
    /*
     * The map function call is callable on array types, it lets you remap your array,
     * with a callback that lets you return any other type using the element in the
     * array that you have to manipulate.
     */
    
    // so we map arrangement so that each element of arrangement is passed to the call
    // back function we provided as a, then we can return whatever we want. in this case
    // the HTML.
    return props.arrangement.map((a) => {
        return `<Data name="{a[0]}" last_name="{a[1]}"></Data>`
    });
}

所以基本上，在迭代数组时使用您在 map 参数中提供的函数，使得 a 是 arrangement 的元素，因为迭代。

更新：

拼写很重要:'D - <Elements arrangement={props.arreglo}/>

好的，因为您将此函数用作 React 应用程序中的一个组件，您必须考虑到函数 return 是一个元素数组，而不仅仅是一个元素，所以您需要将函数的 return 包装在 div 或其他内容中。像这样：

//...
return (
    <div>
        {
            props.arrangement.map((a) => {
                return (<Data name="{a[0]}" last_name="{a[1]}"></Data>)
            });
        }
    </div>
)
//...

我用这个作为参考link

希望我已经回答了你的问题。

Return 元素数量取决于数组维度

Return a number of elements depending on the array dimension

arrays

element

typescript