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

尝试：

删除package-lock.json和/或yarn.lock，
rm -rf node_modules，
如果您使用npm install，则运行yarn install（或yarn）
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>

希望这会对你有所帮助。

从材料ui问题反应可滑动标签

2 个答案: