时间戳

首页 > 解决方案 > 是否可以在反应导入中传递道具

reactjs - 是否可以在反应导入中传递道具

问题描述

所以我有一个名为“Technologies”的组件名称，我正在使用react-icons它并将它通过道具传递给不同的组件名称“图标”或不同的页面。

技术页面：

import Icon from './subcomponents/Icon';

const Technologies = () => {
    return (
      <div className="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
        <div className="grid grid-cols-2 gap-5 row-gap-5 sm:grid-cols-3 lg:grid-cols-6">
          <Icon name={AiFillAndroid}/>
        </div>
      </div>
    );
  };

  export default Technologies;

这是图标页面，我在其中接收道具数据：

import { IconContext } from "react-icons";
import {props.name} from 'react-icons/all';  **// Here is the issue "Is it possible to receive props data like this"**

export default function Icon(props) {
    return (
        <>
            <div className="text-center">
            <div className="flex items-center justify-center w-10 h-10 mx-auto mb-4 rounded-full bg-indigo-50 sm:w-12 sm:h-12">
            <IconContext.Provider value={{ style: { color: '#fff' } }}>
                            <{props.name} /> **// Here is the issue "Is it possible to receive props data like this"**
            </IconContext.Provider>
            </div>
            <h6 className="mb-2 text-sm font-bold leading-5 tracking-wider uppercase">
              World
            </h6>
          </div>
        </>
    )
}

标签： reactjsreact-propsreact-icons

解决方案

您不能通过导入直接访问，而是使用**children**

推荐阅读