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/