在React中使用循环添加自定义组件

Question

我一直在学习React并练习一些基本的东西，这可能是一个非常简单的问题，有一个更简单的解决方案，但是对于我的生活，我无法在谷歌上找到我需要的东西。

基本上我有这段代码:

export default function BigContainer({ rain, icon, temperature, date }) {
return (
<div className='bigContainer'>
<Container rain={rain[0]} icon={icon[0]} temperature={temperature[0]} date={date[0]} />
<Container rain={rain[1]} icon={icon[1]} temperature={temperature[1]} date={date[1]} />
<Container rain={rain[2]} icon={icon[2]} temperature={temperature[2]} date={date[2]} />
</div>
)
}

所讨论的变量是包含数字或字符串的简单数组，没有什么真正重要的。

我一直在寻找一种不需要在每个属性的索引中硬编码的方法，因为硬编码这些东西并不理想。

我已经尝试映射一个数组，但我有点困惑如何实现其他属性与一个数组的关系，我正在映射，所以我不能得到它的工作。

是的，如果有一种方法，比如

Loop the stuff here{
<Container rain={rain[i]} icon={icon[i]} temperature={temperature[i]} date={date[i]} />
}

或类似的东西，这基本上是我所寻找的。提前谢谢你。

Answer 1

假设你的Array对象是这样的;

const rain=[1, 2, 3, 4, 5]
const icon=['icon1', 'icon2', 'icon3', 'icon4', 'icon5']
const temperature = [13, 15, 17, 14, 12]

可以使用Array。像这样映射函数;

[...Array(5)].map((item, idx)=>
<Container
rain={rain[idx]}
icon={icon[idx]}
temperature={temperature[idx]}
key={idx}
/>
)

或者当您的数据对象数组准备好时，您可以使用array。像这样的地图

const weathers=[
{rain:'rainy', temperature:11, date:'2020-04-01'},
{rain:'no rain', temperature:16, date:'2020-04-02'},
{rain:'drizzle', temperature:13, date:'2020-04-03'},
]
return (
<>
{
weathers.map((value, idx) => (
<table key={idx}>
<tr>
<th>rain</th>
<th>temperature</th>
<th>date</th>
</tr>
<tr>
<td>{value.rain}</td>
<td>{value.temperature}</td>
<td>{value.date}</td>
</tr>
</table>
))}
</>
);

Answer 2

试试这个，你可以用你想映射的数组替换[1,2]

[1,2].map((item,index)=>
<Container rain={rain[index]}
icon={icon[index]} 
temperature={temperature[index]}
date={date[index]} />
)

Answer 3

这不是在react中呈现动态值的最佳方式。首先，您需要将值放入对象中。

//For example put them in an array called weather and put the values 
inside with key-value pairs. Then you can easily loop the values.

export default function App() {
return (
<div className="bigContainer">
{weather.map((value) => (
<table>
<tr>
<th>rain</th>
<th>temperature</th>
<th>date</th>
</tr>
<tr>
<td>{value.rain}</td>
<td>{value.temperature}</td>
<td>{value.date}</td>
</tr>
</table>
))}
</div>
);
}

---

Answer 4

你也可以直接传递一个对象数组而不是单独传递数组因为它们是相互关联的

const weather = [
{
rain: 'rain1',
icon: 'icon1',
temperature: 'temp1',
date: 'date1',
},
{
rain: 'rain2',
icon: 'icon2',
temperature: 'temp2',
date: 'date2',
},
{
rain: 'rain3',
icon: 'icon3',
temperature: 'temp3',
date: 'date3',
},
]

{weather.map((item, key) => (
<div key={key} className='bigContainer'>
<Container rain={item.rain} icon={item.icon} temperature={item.temperature} date={item.date} />

</div>
))}

并像这样映射