javascript - 对 Material ui 问题的可滑动标签做出反应

Question

我在我的应用程序中遇到了来自 material-ui 的反应可滑动标签的问题。我安装并完成了文档中推荐的所有操作。现在，我在屏幕截图上显示以下错误。从材料 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>
        );
    }
}

Answer 1

尝试：

1. 删除package-lock.json和/或yarn.lock,
2. rm -rf node_modules,
3. 运行npm install（或者yarn install如果您正在使用yarn），并且
4. npm start再次。

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

Answer 2

您应该将您的代码包含在

导入以下语句

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

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

    <MuiThemeProvider muiTheme={getMuiTheme()}>

    </ MuiThemeProvider>

希望这对您有所帮助。