对 Material ui 问题的可滑动标签做出反应答案

【问题标题】：react swipeable tabs from material ui issue对 Material ui 问题的可滑动标签做出反应
【发布时间】：2018-04-23 06:27:48
【问题描述】：

我的应用程序在使用 material-ui 的 react 可滑动标签时遇到了问题。我安装并完成了文档中推荐的所有操作。现在，我在屏幕截图上显示以下错误。从材料 ui 中合并 可滑动标签 是否有任何问题。因为当我使用受控示例时，它运行良好，没有显示错误。

目前我正在使用以下代码：

import React, { Component } from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
  slide: {
    padding: 10,
  },
};

export default class ProfileTabSection extends Component {

    constructor(props) {
        super(props);
        this.state = {
          slideIndex: 0,
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value) {
        this.setState({
            slideIndex: value,
        });
    };


    render() {
        return(
            <div>
                <div className="container-fluid profile-tab-section">
                    <Tabs 
                        onChange={this.handleTabChange}
                        value={this.state.slideIndex}
                    >
                        <Tab label="Feed" value={0} />
                        <Tab label="All posts" value={1} />
                        <Tab label="Followers" value={2} />
                        <Tab label="Following" value={3} />
                    </Tabs>
                    <SwipeableViews
                      index={this.state.slideIndex}
                      onChangeIndex={this.handleChange}
                    >
                        <div id="feed_slide">
                          It's a feed slide                         </div>
                        <div id="all_posts_slide" style={styles.slide}>
                            It's an all posts slide!
                        </div>
                        <div id="followers_slide" style={styles.slide}>
                          Followers
                        </div>
                        <div id="following_slide" style={styles.slide}>
                          Following
                        </div>
                    </SwipeableViews>
                </div>
            </div>
        );
    }
}

【问题讨论】：

rm -rf node_modules 和 npm install 应该可以解决问题
应用了，但仍然遇到同样的问题

标签： javascript reactjs tabs material-ui react-component

【解决方案1】：

试试：

删除package-lock.json 和/或yarn.lock，
rm -rf node_modules,
运行npm install（或yarn install，如果您使用的是yarn），然后
再次npm start。

如果这不起作用，请分享您的package.json

【讨论】：

【解决方案2】：

你应该在

中包含你的代码

导入以下语句

 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';

稍后将您的 Material-ui 组件包含在以下代码之间

    <MuiThemeProvider muiTheme={getMuiTheme()}>

    </ MuiThemeProvider>

希望对你有所帮助。

【讨论】：