jak odwołać się do komponentu będącego jednoczesnie polem obiektu

Otóż mam taki komponent:

export const Header = {
  primary: enhanced(TextItem, 'top-header'), 
  secondary: function(props){ const {string} = props;
    return (
      <div className ='Element'>
          <SecondaryHeaderText string ={string} />
          <Delete string={string} /> 
      </div>
    )
  } 
}

który wywoływany i renderowany jest w taki sposób:

  const Tree =(props)=> {
 
    const {ary, order} = props;
   
    const header = ary.shift();
      return (
       (ary)? 
        <React.Fragment>
            {/* <SecondaryHeader string ={header} />              */}
            <Header.secondary string ={header} />   
            {/* {ary.map((item)=><BorderedElement key={item} string = {item} />)} */}
            {ary.map((item)=><enhancedElement.secondary key={item} string = {item} />)}
        </React.Fragment>
        :null    
      );
    }
  

i w takim układzie wszystko gra. Natomiast chce wykorzystać propsa order, który może przyjmować wartość 'secondary' lub 'primary' i odwołać się do komponentu jakoś tak:

<Header[{order}] string ={header />

Problem w tym, że sprawdziłam poza powyższą kilka składni i wszystkie rzucają błąd (jeszcze przed kompilacją). Zapewne ten sam efekt można osiągnąć przez operatory logiczne, ale chciałabym zrozumieć/upewnić się, dlaczego taki zapis nie działa

Dobre pytanie, sam jestem ciekaw. Na ten moment możesz spróbować czegoś takiego.

  const order = "secondary"
  const YourHeader = Header[order]

  return (
    <>
      <YourHeader />

Lub

  const order = "primary"

  return (
    <>
      {Header[order](props)}

Doctanna napisał(a):

i w takim układzie wszystko gra. Natomiast chce wykorzystać propsa order, który może przyjmować wartość 'secondary' lub 'primary' i odwołać się do komponentu jakoś tak:

<Header[{order}] string ={header />

Problem w tym, że sprawdziłam poza powyższą kilka składni i wszystkie rzucają błąd (jeszcze przed kompilacją).

To nie ma prawa się kompilować, bo zapomniałaś klamerki po header.

Ale nawet jak ją dodasz i się skompiluje, to nie będzie mieć wiele sensu, bo to:

<Header[{order}] string ={header} />

jest równoznaczne z tym:

const key = {order: order};  // np. {order: 'primary'};

// to niżej będzie miało taki efekt jak Header["[object Object]"] 
// bo key się skonwertuje do stringa "[object Object]":
// czyli kompletnie nie będzie mieć to sensu
const Foo = Header[key];   
<Foo string ={header} />

Jeśli chcesz się odwołać do właściwości obiektu Header, to wystarczy taki zapis:

<Header[order] string={header} />

O ile się nie mylę, to powinno się kompilować. Nie chce mi się sprawdzać teraz, ale jeśli by się to nie kompilowało to możesz zastosować taką sztuczkę:

const Component = Header[order];
<Component string={header}/>

Czyli wydzielasz zmienną (pisaną z wielkiej litery) jako komponent.

<enhancedElement.secondary

To ci działa? Po mojemu to zmienna enhancedElement by musiała być z wielkiej litery (EnhancedElement), żeby JSX załapał ją jako komponent (a nie jako zwykły tag HTML).

Tu masz jeszcze nieco więcej o tym: https://reactjs.org/docs/jsx-in-depth.html

Ostatecznie jest tak:

const Component = Header[order];
<Component string={header}/>

choć własnie tego starałam się uniknąć, ale

<Header[order] string={header} />

się jednak nie chciało skompilować.
Dziękuję wszystkim