javascript 从材料UI问题React可滑动标签

icomxhvb  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(132)

我在我的应用程序中遇到了一个来自material-ui的react可滑动标签的问题。我安装并做了文档中推荐的所有事情。现在,我得到了屏幕截图上显示的以下错误。合并来自material-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>
        );
    }
}
fjnneemd

fjnneemd1#

您应该将代码包含在
导入以下语句

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

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

<MuiThemeProvider muiTheme={getMuiTheme()}>

    </ MuiThemeProvider>

希望这对你有帮助。

eivgtgni

eivgtgni2#

试试看:
1.删除package-lock.json和/或yarn.lock

  1. rm -rf node_modules
    1.运行npm install(如果使用的是yarn,则运行yarn install),然后
    1.又是npm start
    如果这不起作用,请共享您的package.json

相关问题