在使用typescript的纯函数组件中，我们如何将字符串数组呈现为无序列表？
import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
<li>Water<li/>
<li>Orange Juice<li/>
<li>Milk<li/>
</ul>
);
}
export { Drinks };
import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{myArray.map((item:string, index:number)=><li key={index}>{item}</li>)}
/* using index number as key is not recommendable.
But in this case, it doesn't matter.*/
</ul>
);
}
export { Drinks };
您可以map作为孩子使用：
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{myArray.map(o => <li key={o}>{o}</li>)}
</ul>
);
}
export { Drinks };
注意 key = {o}有助于react唯一标识更新的元素。这假设字符串在数组中是唯一的。
import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{ myArray.map( (drink,index) => (<li key={index} >{drink}</li>)) }
</ul>
);
}
export { Drinks };
您可以使用 map 来渲染数组，例如
<ul>
{myArray.map((arr,i) =>
return <li key={i}>{arr}</li>
)
</ul>