Можно ли передавать реквизиты в реагирующем импорте

avatar
Deepak Ranga
8 августа 2021 в 18:07
139
2
0

Итак, у меня есть имя этого компонента под названием «Технологии», где я использую 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>
        </>
    )
}
Источник

Ответы (2)

avatar
Deepak Ranga
8 августа 2021 в 19:44
0

Решено:

в Technologies.js:

import React from 'react';
import { IconContext } from "react-icons";
import * as Icons from 'react-icons/all';
import IconsData from './subcomponents/IconsData';

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">
                {IconsData.map((item, index) => {
                    return (
                        <div className="text-center" key={index}>
                            <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' } }}>
                                    {item.icon}
                                </IconContext.Provider>
                            </div>
                            <h6 className="mb-2 text-sm font-bold leading-5 tracking-wider uppercase">
                                {item.title}
                            </h6>
                        </div>
                    );
                })}

            </div>
        </div>
    );
};

export default Technologies;

И в IconsData.js:

import React from 'react'
import * as Icons from 'react-icons/all';

const IconsData = [
{
    title: 'Wordpress',
    icon: <Icons.ImWordpress />
},
{
    title: 'ReactJs',
    icon: <Icons.GrReactjs />
}
];

export default IconsData;

РАБОТАЛО!!!

avatar
rappid juniper
8 августа 2021 в 18:10
2

Вы не можете получить прямой доступ через импорт, вместо этого используйте **children**

Deepak Ranga
8 августа 2021 в 18:17
0

Здесь Technologie.js является родителем, откуда я отправляю данные реквизита, а Icon.js является дочерним элементом, откуда я получаю данные, но для импорта также требуется имя значка реакции... где я сталкиваюсь с трудностями

rappid juniper
8 августа 2021 в 18:26
0

с значком реакции вы не можете напрямую искать значки пользовательского интерфейса материала, чтобы реагировать, он будет соответствовать вашему сценарию, или вы хотите использовать значок импорта реагирующих-против в Technologies.js, а затем импортировать technology.js как компонент в другой компонент