javascript - 使用 React 将数组导出为 Component prop

Question

我想知道是否有一种方法可以在一个文件中包含一组 React 元素，然后将其导出以使用 props 导入到另一个文件中？类似...

import MenuItem from 'material-ui/lib/menus/menu-item';


exports.menuItems = [
  <MenuItem primaryText='Make glue' onTouchTap={this.props.makeGlue}/>, //<-- I am guessing props cannot be passed like this???
  <MenuItem primaryText='Make more sticky glue'/>
]

...然后将 menuItems 作为另一个组件的子组件导入到另一个文件中？我想将不同菜单项的各种数组保留在一个文件中，并根据需要将它们导入其他文件中。有什么想法或想法吗？如果可能的话，我非常喜欢从单个文件导出不同菜单项的服务器数组。

TIA!

Answer 1

你最好只制作一个能够完成你所说的事情的组件。请记住，组件只是函数，因此您可以传递 props。

import MenuItem from 'material-ui/lib/menus/menu-item';

export default ({ makeGlue }) => {
  return [
    <MenuItem primaryText='Make glue' onTouchTap={makeGlue} />,
    <MenuItem primaryText='Make more sticky glue'/>
  ]
}

无论哪种方式，这个函数都会接受一些 Prop 并以数组形式返回您想要的组件。