arrays - 根据数组维度返回多个元素
问题描述
我有一个可变尺寸排列。
在没有这么多条件的情况下,如何显示或返回等于数组维度的多个 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>
)
}
为什么会这样?
解决方案
通过查看您提供的示例代码,我建议您使用现代 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}/>
好的,因为您将此函数用作反应应用程序中的组件,您必须考虑该函数返回一个元素数组而不仅仅是一个元素,因此您需要将函数的返回包装在 adiv
或其他东西中。像这样:
//...
return (
<div>
{
props.arrangement.map((a) => {
return (<Data name="{a[0]}" last_name="{a[1]}"></Data>)
});
}
</div>
)
//...
我用这个作为参考链接
我希望我已经回答了你的问题。
推荐阅读
- datetime - Elixir 等效于 Ruby on Rails 时间助手(例如 1.day.ago)
- c - 如何将函数中的指针位置相乘?
- ios - 模拟器未显示在 Spotlight 搜索中 - Big Sur
- c# - 错误 NU1202 Microsoft.EntityFrameworkCore.SqlServer 5.0.0 包与 net50 不兼容
- c# - 从.net core SignalR接收两条消息并做出反应
- javascript - CDN 上的服务器端渲染问题
- javascript - 当用户更改活动浏览器选项卡时,异步请求或函数是否会暂停执行?
- java - 在方法内部分配 null
- javascript - 无法添加到我网站上的购物车。一些 Javascript 错误?
- pine-script - 三元运算符如何与多个耦合的三元运算符一起工作?