Reactjs 从类函数传递属性

所以我从Vue.js开始反应。如何在组件内部创建和使用函数，该函数返回一个

数组

，以便将其作为道具传递

class Header extends Component {

 constructor(props) {
   ...
 }

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

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

类头扩展组件{
建造师（道具）{
...
}
menuItems（）{
返回[{title:1}，{title:2}，…]
}
render（）{
返回
}
}

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

---

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

该方法应返回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>
      )
   }
}

从“./Menu.jsx”导入菜单；
从“/MenuItem.jsx”导入菜单项；
const menuData=[{id:1，title:1}，{id:2，title:2}，…]；
类标头扩展组件{
RenderNuItems（）{
返回(
menuData.map（项=>(
)
)
}
render（）{
返回(
{this.renderNuItems（）}
)
}
}

上述代码看起来不像是在创建一个

堆栈溢出问题。您需要检查导致该问题的代码的其他部分。您为传递菜单项而编写的方式看起来正常。