使用变量动态获取属性

import React from "react";
import 'antd/dist/antd.css';
import {
      ManOutlined, WomanOutlined } from '@ant-design/icons';

import Img from '@/assets/login-bg.png';

// props获取的data数据规则
export interface DataInterface {
     
    /**
     * 列表title标题
     */
    user_name: string,
    /**
     * 昵称
     */
    nickname: string,
    /**
     * 电话号码
     */
    phone: string,
    /**
     * 邮箱号码
     */
    email: string,
    /**
     * 手机号码
     */
    mobile_phone: string,
    /**
     * 地区
     */
    region: string,
    /**
     * 企业logo
     */
    logo: string
}

// 接收父组件的data
interface ComponentProps {
     
    data: DataInterface
}

// 定义列表title规则
interface TitleInterface {
     
	name: string,
	// 解决使用变量动态获取key值问题
	value: keyof DataInterface
}

const FComponent: React.FC<ComponentProps> = (props) => {
     
    // 用户信息数据间距
    const userSize: number = 9;

    // 用户信息栏
    const title: Array<TitleInterface> = [
        {
     
            name: '昵称',
            value: 'nickname'
        },
        {
     
            name: '电话号码',
            value: 'phone'
        },
        {
     
            name: '邮箱号码',
            value: 'email'
        },
        {
     
            name: '手机号码',
            value: 'mobile_phone'
        },
        {
     
            name: '地区',
            value: 'region'
        },
        {
     
            name: '企业logo',
            value: 'logo'
        }
    ]

    // 性别图标
    const icon: number = 1;

    return (
        <div className="userInfoContent">
            <div className="userInfoContent-img">
                <img src={
     Img} alt=""/>
            </div>
            <div className="userInfoContent-user">
                    {
     title.map((item, index) => {
     
                        return (
                            <div key={
     index} style={
     {
      fontSize: 14, color: '#333333' }}>
                                    <span>{
     item.name}:</span>
                                    <span>{
     props.data[item.value]}</span>
                            </div>
                        )
                    })}
            </div>
        </div>
    );
}

export default FComponent;