Question

我试图将很多组件动态打印到li列表中。

在父组件中，列表menuLinks是一个数组。 menuLinks的每个子项都是一个组件（LinkToChangePassword是一个反应功能组件）：

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

然而，这不起作用＆amp;我得到空名单。

Answer 1

您尝试仅在JSX 中通过名称引用react组件而不用用斜角括号围绕它：

ComponentNameHere 而不是：＆lt; ComponentNameHere＆gt;

一个解决方案：

您需要确保将组件导入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/

React - 映射要返回的组件数组

2 个答案: