Передать компонент как опору в Reactjs

Question

У меня есть статья, показывающая, как передать компонент в качестве опоры, но я не мог заставить ее работать, может ли кто-нибудь мне помочь?

Это тот пример, который я получил.

import React from "react";
import Foo from "./components/Foo";
import Bar from "./components/Bar";

const Components = {
  foo: Foo,
  bar: Bar
};

export default block => {
  // component does exist
  if (typeof Components[block.component] !== "undefined") {
    return React.createElement(Components[block.component], {
      key: block._uid,
      block: block
    });
  }
}

А это мой код

У меня есть один файл с именем routes.js, состояние которого называется маршрутами.

var routes = [
  {
    path: "/user-profile",
    name: "Quem Somos",
    icon: "FaIdBadge",
    component: UserProfile,
    layout: "/admin"
  }

И еще один компонент, называемый боковой панелью, где я получаю маршруты и мне нужно изменить значок в зависимости от того, что настроено в опоре "маршруты".

const Components = {
      fa:FaIdBadge
    }

<i>{prop => Components(prop.icon)}</i>

Но свойство со значком не распознается.

Answer 1

Вы довольно близки.

Выбор типа в качестве среды выполнения

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

Так что конкретнее для вашего примера

// component map in the file for lookup
const components = {
  fa: FaIdBadge,
}

...

  // In the render function
  // fetch the component, i.e. props.icon === 'fa'
  const IconComponent = components[props.icon];

  ...

  <IconComponent />