React - Map Over Array von Komponenten zurückgeben

Question

Ich versuche, dynamisch viele Komponenten in eine li Liste zu drucken.

In der übergeordneten Komponente ist die Liste menuLinks ein Array. Jedes Kind von menuLinks ist eine Komponente (LinkToChangePassword ist eine funktionale Komponente reagieren):

export default class Header extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    const menuLinks = [ 
     LinkToChangePassword, 
     LinkToResetPassword, 
     LinkToChangeEmail, 
     LinkToLogOut 
    ]; 
    return(
     <div className="header"> 
     <LinkToHome classAttr=""/> 
     <h1 className="">{ this.props.heading }</h1> 
     <DropDownMenu links = { menuLinks }/> 
     </div> 
    ); 
    } 
} 

In meinem Kind Komponente, würde Ich mag diese Komponenten befestigen:

export default class DropDownMenu extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    let renderMenuItems = this.props.links.map(
     (item, i) => <li className = "menuItem" 
         key = {`li${i}`}> 
         {item} 
        </li> 
    ); 
    return <ul className = "profileMenu"> 
      { renderMenuItems } 
      </ul>; 
    } 
} 

jedoch diese nicht funktioniert & Ich bekomme eine leere Liste.

Answer 1

dies einmal versuchen. Vielleicht kann das helfen. Hier

const menuLinks = [ 
    <LinkToChangePassword />, 
    <LinkToResetPassword />, 
    <LinkToChangeEmail />, 
    <LinkToLogOut /> 
]; 

ist eine Geige https://jsfiddle.net/jwm6k66c/1785/

Answer 2

Ihr Versuch, eine reagieren Komponente namentlich in JSX ohne umgebenden mit spitzen Klammern nur zu verweisen:

ComponentNameHere statt: < ComponentNameHere>

Eine Lösung:

Sie müssen sicherstellen, dass Sie Komponenten in Ihre DropDownMenu-Klasse importieren.

Sie können dann ersetzen {Element} Anweisung in Ihrem .map Anruf React.createElement()

{React.createElement(item, null)} 

Funktion machen Geänderte zu verwenden:

render(){ 
    let renderMenuItems = this.props.links.map((item, i) => 
    <li className = "menuItem" key = {`li${i}`}> 
     {React.createElement(item, null)} 
    </li> 
); 
    return <ul className = "profileMenu"> { renderMenuItems } </ul>; 
}