Возможно ли передать компонент React в качестве аргумента между функциями Контейнерного компонента

Передача дочерних компонентов в качестве аргументов в функции родительского компонента и попытки рендеринга не работают

//React Container Component
//Import Both Views and Render based on preference
import PosterView from "./PosterView"
import ListView from "./ListViewCard"

...

renderCardsBasedOnType(cardType){
  if(cardType === "poster"){
     return this.renderCards(PosterView)
  }else{
     return this.renderCards(ListViewCard)
  }
}
renderCards(component){
  let cards =  this.props.list.map(function(cardData){
     return <component data={cardData}/>
   })
  return cards
}
render(){
  let cards = this.renderCardsBasedOnType("poster")
  return <div>{cards}</div>
}
......

Ответы

Ответ 1

Попробуйте Component вместо Component. Для реактирования требуется тег uppercase для jsx:

renderCards(Component){
  let cards =  this.props.list.map(function(cardData){
     return <Component data={cardData}/>
   })
  return cards
}

Ответ 2

Благодаря ответу Дэмиена, здесь тот же ответ, используя TypeScript с React.

Вместо этого, то есть простой компонент без оболочки...

export const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

... вы можете передать компонент в оболочку, которая будет отображаться там, вот так...

const renderContent: FunctionComponent<FunctionComponent> = (Foo: FunctionComponent) => {
  return (
    <div className="foo">
      <Foo />
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  return renderContentOne(SiteMapContent);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

Снова имя параметра должно быть в верхнем регистре, например, Foo не foo.

Другой способ, конечно, вместо передачи компонента, как это было задано в OP, состоит в том, чтобы передать элемент вместо компонента (в этом случае имя параметра не обязательно должно быть в верхнем регистре):

const renderContent: FunctionComponent<ReactElement> = (foo: ReactElement) => {
  return (
    <div className="foo">
      {foo}
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  const foo: ReactElement = <SiteMapContent />;
  return renderContentOne(foo);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}