reactjs - React Typescript：将字符串数组呈现为无序列表

Question

在使用打字稿的纯功能组件中，我们如何将字符串数组呈现为无序列表？

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 };

标签： reactjstypescript

Answer 1

您可以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}对于帮助唯一地识别要更新的元素做出反应是必要的。这假定字符串在数组中是唯一的。