动态传入Class创建子Component

动态传入Class创建子Component

需求是不同的Menu标题要有不同的Icon图标

import FaEye from "react-icons/fa/eye";
import FaLapTop from "react-icons/fa/laptop";
import FaBook from "react-icons/fa/book";
import FaCogs from "react-icons/fa/cogs";

//把从React Icon导入的Component作为data里的"icon"变量导入
const datas = [
    {"title": "首页", "icon": FaEye},
    {"title": "漏洞", "icon": FaLapTop},
    {"title": "用户", "icon": FaBook},
    {"title": "平台", "icon": FaCogs},
];

//通过map循环创建menus
class SideBar extends Component {

    render() {

        let menus = datas.map((data) => <Menu data={data} key={data.title}/>);

        return (
            <div>
                <ul>
                    {menus}
                </ul>
            </div>
        );
    }
}

//通过Menu里动态创建子Component
class Menu extends Component {

    render() {
        return (
            <li>
                <a>
                    {React.createElement(this.props.data.icon)}
                    <span>{this.props.data.title}</span>
                </a>
            </li>
        )
    }
}

用到的知识点

1. JSX中使用大括号转入JavaScript解析
2. 使用了React的createElement方法动态创建JSX的Element，让子Component生效

赏

请问老板还招人么(/ω＼)

支付宝

微信