根据数组维度返回多个元素

Question

我有一个可变尺寸排列。

在没有这么多条件的情况下，如何显示或返回等于数组维度的多个 Data 元素。 因为，在第一种情况下，装置的尺寸是未知的。 这可能具有 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 映射 function 到正确的 map 将您的数据转换为上述结果。

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

// 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>`
    });
}

所以基本上 function 您在map arguments 中提供的用于迭代数组时，由于迭代， a是和arrangement元素。

更新：

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

好的，因为您使用此 function 作为 react 应用程序中的组件，您必须考虑 function 返回一个元素数组而不仅仅是一个元素，因此您需要将 ZC1C425268E68385D1AB507 的返回值包装在div或 499A 中。 像这样：

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

我用这个作为参考链接

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