Визуализация компонента, переданного как опора

Question

Как я могу отрендерить StyledComponent, который передается как реквизит?

Я передаю компонент Spinner в мой BarComponent в качестве реквизита для рендеринга.Я попытался использовать {this.props.icon} в моем BarComponent в следующем примере, но вместо этого он выдал ошибку:

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {$$ typeof), render, attrs, componentStyle, displayName, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}).Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Как это исправить?

import React, { Component } from 'react';
import { StyledIcon } from 'styled-icons';
import { Spinner } from 'styled-icons/fa-solid';

interface BarComponentProps {
  icon: StyledIcon,
  name: string
}

class BarComponent extends Component<BarComponentProps> {
  render() {
    return (
      // How to render a StyledComponent passed in as a prop?
      // In this example it should result in something like:
      // <div><Spinner /> - {this.props.name}</div>
      <div>{this.props.icon} - {this.props.name}</div>
    );
  }
}

class FooComponent extends Component {
  render() {
    return <BarComponent icon={Spinner} name='Baz' />;
  }
}

Answer 1

Вы можете использовать createElement(), вот так:

<div>{React.createElement(this.props.icon)} - {this.props.name}</div>

Answer 2

не передайте имя класса, а вместо этого передайте компонент:

class FooComponent extends Component {
  render() {
    return <BarComponent icon={<Spinner />} name='Baz' />;
  }
}

Это шаблон композиции.

Если вы даже обрабатывали его, передавая только имя класса (скажем, с React.createElement) это было бы не очень полезно, если вам нужно предоставить дополнительные реквизиты (например, параметры или style).Так что композиция здесь гораздо более гибкая

Answer 3

Попробуйте передать это как дети.

<BarComponent name='Baz' >
<Spinner />
</BarComponent>

class BarComponent extends Component<BarComponentProps> {
 render() {
  return (
  // How to render a StyledComponent passed in as a prop?
  // In this example it should result in something like:
  // <div><Spinner /> - {this.props.name}</div>
  <div>{this.props.children} - {this.props.name}</div>
);
}
}