React(TypeScript) 循环渲染数组类型和对象类型的

数组类型

import React from 'react';

const Other = () => {
    const data = ['W', 'A', 'N', 'G', 'Y'];
    return (
        <div className="Other">
            {
                data.map((item: string, index: number) =>
                    <h6 style={{ color: 'red' }} key={index}>{index}:{item}</h6>
                )
            }
        </div>
    );
}

export default Other;

对象类型

import React from 'react';

interface Person {
    [key: string]: any,
    name: string,
    age: number,
    sex: string
}
const Other = () => {
    const obj: Person = {
        name: 'wy',
        age: 66,
        sex: '♂'
    };
    return (
        <div className="Other">
            {
                Object.keys(obj).map((item: string, index: number) =>
                    <h6 key={index} style={{ color: 'red' }}>{item} :{obj[item]} </h6>
                )
            }
        </div>
    );
}

export default Other;