Reactjs 无法查看选项卡内容

我正在处理react，在这两个选项卡下有两个选项卡，我列出了几个项目。现在默认情况下，设置了我的第一个选项卡，如果我按下另一个选项卡，我将看不到内容

import React, { Component } from "react";
import {
  Tabs,
  Tab,
  Grid,
  Cell,
  Card,
  CardTitle,
  CardText,
  CardActions,
  Button,
  CardMenu,
  IconButton
} from "react-mdl";

class Projects extends Component {
  constructor(props) {
    super(props);
    this.state = { activeTab: 0 };
  }

  toggleCategories() {
    if (this.state.activeTab === 0) {
      return (
        <div className="projects-grid">
          {/* 1st project*/}
          <Card shadow={5} style={{ mimWidth: "450", margin: "auto" }}>
            <CardTitle
              style={{
                color: "#fff",
                height: "176px",
                background:
                  "url(https://cdn.worldvectorlogo.com/logos/react-1.svg) center / cover"
              }}
            >
              React Project #1
            </CardTitle>
            <CardText>Personal Protfolio</CardText>
            <CardActions border>
              <Button colored>
                <a href="https://github.com/mjachowdhury/myPortfolio">Github</a>
              </Button>
              <Button colored>CodePen</Button>
              <Button colored>Live Demo</Button>
            </CardActions>
            <CardMenu style={{ color: "#fff" }}>
              <IconButton name="share" />
            </CardMenu>
          </Card>
      );
    } 

render() {
    return (
      <div className="category-tabs">
        <Tabs
          activeTab={this.state.activeTab}
          onChage={tabId => this.setState({ activeTab: tabId })}
          ripple
        >
          <Tab>React</Tab>
          <Tab>Angular</Tab>
        </Tabs>

        <Grid>
          <Cell col={12}>
            <div className="content">{this.toggleCategories()}</div>
          </Cell>
        </Grid>
      </div>
    );
  }
}

export default Projects;

import React，{Component}来自“React”；
进口{
标签，
标签，
网格，
细胞，
卡片
名片，
卡片文本，
卡片行动，
按钮
卡片菜单，
图标按钮
}从“反应mdl”；
类项目扩展组件{
建造师（道具）{
超级（道具）；
this.state={activeTab:0}；
}
切换类别（）{
if（this.state.activeTab==0）{
返回(
{/*第一个项目*/}
反应项目#1
个人档案
代码笔
现场演示
);
} 

第二个选项卡包含显示项目的内容

else if (this.state.activeTab === 1) {
      return (
        <div className="projects-grid">
          {/* 1st project*/}
          <Card shadow={5} style={{ mimWidth: "450", margin: "auto" }}>
            <CardTitle
              style={{
                color: "#fff",
                height: "176px",
                background:
                  "url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ08kJ77S5fZJQDJyjs6rgSQqFszjq6tyt31ui_-QXbU4W3ZpQV&s) center / cover"
              }}
            >
              {/*Angular Project #1*/}
            </CardTitle>
            <CardText>Angular Project #1 - Exhivision Website</CardText>
            <CardActions border>
              <Button colored>
                <a href="https://github.com/mjachowdhury/myPortfolio">Github</a>
              </Button>
              <Button colored>CodePen</Button>
              <Button colored>Live Demo</Button>
            </CardActions>
            <CardMenu style={{ color: "#fff" }}>
              <IconButton name="share" />
            </CardMenu>
          </Card>
          {/* 2nd project*/}
          <Card shadow={5} style={{ mimWidth: "450", margin: "auto" }}>
            <CardTitle
              style={{
                color: "#fff",
                height: "176px",
                background:
                  "url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ08kJ77S5fZJQDJyjs6rgSQqFszjq6tyt31ui_-QXbU4W3ZpQV&s) center / cover"
              }}
            > 
      );
    }

else if（this.state.activeTab==1）{
返回(
{/*第一个项目*/}
{/*角度投影#1*/}
Angular项目#1-Exhivision网站
代码笔
现场演示
{/*第二个项目*/}
);
}

渲染部分具有显示不同选项卡内容的逻辑

import React, { Component } from "react";
import {
  Tabs,
  Tab,
  Grid,
  Cell,
  Card,
  CardTitle,
  CardText,
  CardActions,
  Button,
  CardMenu,
  IconButton
} from "react-mdl";

class Projects extends Component {
  constructor(props) {
    super(props);
    this.state = { activeTab: 0 };
  }

  toggleCategories() {
    if (this.state.activeTab === 0) {
      return (
        <div className="projects-grid">
          {/* 1st project*/}
          <Card shadow={5} style={{ mimWidth: "450", margin: "auto" }}>
            <CardTitle
              style={{
                color: "#fff",
                height: "176px",
                background:
                  "url(https://cdn.worldvectorlogo.com/logos/react-1.svg) center / cover"
              }}
            >
              React Project #1
            </CardTitle>
            <CardText>Personal Protfolio</CardText>
            <CardActions border>
              <Button colored>
                <a href="https://github.com/mjachowdhury/myPortfolio">Github</a>
              </Button>
              <Button colored>CodePen</Button>
              <Button colored>Live Demo</Button>
            </CardActions>
            <CardMenu style={{ color: "#fff" }}>
              <IconButton name="share" />
            </CardMenu>
          </Card>
      );
    } 

render() {
    return (
      <div className="category-tabs">
        <Tabs
          activeTab={this.state.activeTab}
          onChage={tabId => this.setState({ activeTab: tabId })}
          ripple
        >
          <Tab>React</Tab>
          <Tab>Angular</Tab>
        </Tabs>

        <Grid>
          <Cell col={12}>
            <div className="content">{this.toggleCategories()}</div>
          </Cell>
        </Grid>
      </div>
    );
  }
}

export default Projects;

render（）{
返回(
this.setState（{activeTab:tabId}）}
涟漪
>
反应
有棱角的
{this.toggleCategories（）}
);
}
}
导出默认项目；

---

这是迄今为止我所做的，它没有显示我的第二个选项卡内容。任何想法

我通过你的代码重现了这个问题，并创建了一个示例

---

不幸的是，这不会有什么帮助。但是，如果您打开控制台，您也会看到您在调用

onChange

方法的部分中所做的类型错误，即

onChage

完美地完成了它的工作，这是一个o类型，但它没有给我任何错误。非常感谢您的关注。