reactjs - Redă un component trecut ca Prop

Cum pot reda un StyledComponent care este transmis ca prop?

Transmit un component Spinner către componenta mea BarComponent ca o proprietate pentru a fi redat. Am încercat să folosesc {this.props.icon} în componenta mea BarComponent în următorul exemplu, dar mi-a dat în schimb o eroare:

Obiectele nu sunt valide ca un copil React (s-a găsit: obiect cu cheile {$$typeof, render, attrs, componentStyle, displayName, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). Dacă intenționai să redai o colecție de copii, folosește în schimb un array.

Cum pot să repar asta?

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' />;
  }
}

Răspuns #1

Poți folosi createElement(), astfel:

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

Răspunsul #2

nu trece numele clasei, ci trece componenta în schimb:

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

Acesta este un tipar de compoziție.

Chiar dacă l-ai gestiona doar trecând numele clasei (de exemplu cu React.createElement), acest lucru nu ar fi foarte util în cazul în care trebuie să furnizezi proprietăți suplimentare (cum ar fi parametri sau style). Deci, compoziția este mult mai flexibilă aici