Question

所以我从Vue.js移到了React。如何在组件内部创建并使用一个返回Array的函数，以便将其作为道具传递？

class Header extends Component {

 constructor(props) {
   ...
 }

 menuItems(){
    return [{title: 1}, {title: 2}, ...]
 }

 render(){
  return <Other 
    items={this.menuItems()}
  />
 }
}

这样的代码导致堆栈溢出。可能是因为调用了该函数的渲染器。

在Vue中，计算的属性既简单又简单。 React中的解决方案是什么？

Answer 1

该方法应返回JSX代码。这样的事情可能是有效的方案：

import Menu from './Menu.jsx';
import MenuItem from './MenuItem.jsx';

const menuData = [{id:1, title: 1}, {id:2, title: 2}, ...];

class Header extends Component {    

  renderMenuItems(){
    return (
      menuData.map(item => (
        <MenuItem key={item.id} {...item} />
      )
     )
   }

   render(){
     return (
       <Menu>
         {this.renderMenuItems()}
       </Menu>
      )
   }
}

从类函数传递属性

1 个答案: