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