React-映射要返回的組件數組

Question

我試圖將許多組件動態打印到一個li列表中。

在父組件中，列表menuLinks是一個數組。 menuLinks每個子menuLinks都是一個組件（LinkToChangePassword是一個react功能組件）：

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>
    );
  }
}

在我的子組件中，我想附加以下組件：

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

但是，這不起作用＆我得到空列表。

Answer 1

您試圖僅在JSX中按名稱引用react組件， 而沒有用尖括號將其包圍：

ComponentNameHere而不是： <ComponentNameHere>

一種解決方案：

您需要確保將組件導入到DropDownMenu類中。

然后，您可以在.map調用中替換{item}語句以使用React.createElement（）

{React.createElement(item, null)}

修改了渲染功能：

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

Answer 2

嘗試一次。 也許可以幫上忙。

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

這是一個小提琴https://jsfiddle.net/jwm6k66c/1785/