Question

我不确定如何说出这个问题，所以这就是我要做的事情：

<NavMenu>
  <MenuItem />
  <MenuItem />
</NavMenu>
<ShortcutMenu>
  <MenuItem />
  <MenuItem />
</ShortcutMenu>

我想弄清楚的是，我是否可以拥有两个不同的组件，两个名称都是MenuItem，一个是在NavMenu上下文中执行的，另一个是在ShortcutMenu上下文中执行的。两个不同的MenuItem将呈现为完全不同的HTML。我考虑从AngularJS切换到ReactJS，因为当我在Angular中遇到这个问题时，我最终不得不使用像NavMenu_MenuItem这样的名字，这只是令人不愉快。

我一直在阅读ReactJS并阅读他们的入门教程。我还没有找到这个问题的明显答案。一旦你理解了ReactJS的一些内部工作原理，我认为它可能是显而易见的。但我还没有理解，如果这不可能，那么我可能会坚持使用Angular。

Answer 1

这与具有相同名称和不同值的两个变量相同，这取决于您正在使用的范围。

Answer 2

我会在NavMenu.js。

中执行此操作

class NavMenu extends React.Component{
...
}

NavMenu.MenuItem = require('./MenuItem');

export default NavMenu;

对于ShortcutMenu也一样。

现在你可以做到

<NavMenu>
  <NavMenu.MenuItem />
  <NavMenu.MenuItem />
  <NavMenu.MenuItem />
</NavMenu>

<ShortcutMenu>
  <ShortcutMenu.MenuItem />
  <ShortcutMenu.MenuItem />
  <ShortcutMenu.MenuItem />
</ShortcutMenu>

在不同的上下文中重用ReactJS模板标记名称

2 个答案: