如何在ReactJS中使用onClick处理事件

Question

我对ReactJ相当陌生，尝试在左侧创建一个静态的侧边栏菜单，并选择Overview，Performance和Stability。然后，我想在菜单的右侧显示一个部分，以显示左侧菜单中3个选项的选择结果。到目前为止，我已经有了以下代码，并使用网格将两个部分分开。当用户单击菜单选项之一时，我试图完成3件事情。首先，当他们单击“概述”时，右侧网格部分需要加载从概述文件夹导入的js。第二，我还需要突出显示“概述”菜单选择，以便使用户知道他们选择了什么。第三，打开页面时，默认情况下我需要页面始终位于总览选择中。为了让我完成这三件事，请让我知道我需要在下面的代码中添加些什么。谢谢。

import Overview from "./overview";
import Performance from "./performance";
import Stability from "./stability";

export default class Menu extends React.Component {
  render() {
    return (
            <Grid>
              <GridItem columnSpan = {3}>
                 <h3> Menu selection </h3> <br/>
                 <h1> Overview </h1> <br/>
                 <h1> Performance </h1> <br/>
                 <h1> Stability </h1>
              </GridItem>
              <GridItem columnSpan = {9}>
                 <h3> Info </h3> <br/>
              </GridItem>
            </Grid>
        );
    }
}

Answer 1

我创建了一个示例代码，我对您的代码所做的更改最小。但是我必须提醒您，这不是（甚至不是）处理它的最佳方法。