react.js 无法导入组件

Question

i'm trying to export a component using export default project; and importing using

import project, {toggleCattegories} from './project';

i get the following warning:

./src/components/projecten.js
  Line 2:8:  'project' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

project.js code:

import React, { Component } from 'react';
import { Card, CardTitle, CardActions, Button, CardText } from 'react-mdl';

class project extends Component{

constructor(props) {
    super(props)
    this.state = { activeTab: 0 };
}

        toggleCategories() {
    if (this.state.activeTab === 0) {
        return (
            <div className="projects-grid">
                {/*Web*/}
                <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
                    <CardTitle style={{ color: '#000', height: '176px', background: 'url(https://miro.medium.com/max/3600/1*HSisLuifMO6KbLfPOKtLow.jpeg) center / cover' }}></CardTitle>

                    <CardText><h4>Mijn Portfolio</h4>
                        <p>Mijn Portfolio heb ik in ReactJs geschreven. Bekijk het project op github via de button onder deze tekst.</p></CardText>
                    <CardActions border>
                        <Button colored style={{ width: "100%" }}><a href="https://github.com/aminaloui/myportfolio">Github</a></Button>
                    </CardActions>

                </Card>

                <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
                    <CardTitle style={{ color: '#000', height: '176px', background: 'url(https://miro.medium.com/max/3600/1*HSisLuifMO6KbLfPOKtLow.jpeg) center / cover' }}> </CardTitle>
                    <CardText><h4>Boodschappenlijst</h4>
                        <p>In de applicatie meld je je via je google account aan en kun je een boodschappenlijstje opzetten. De objecten worden opgeslagen in een firebase database. </p></CardText>
                    <CardActions border>
                    <Button colored style={{ width: "100%" }}><a href="https://github.com/aminaloui/boodschappen-lijst">Github</a></Button>
                    </CardActions>

                </Card> 
            </div>
        )
    } else if (this.state.activeTab === 1) {
        return (


            <div>{/*Java*/}
                <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
                    <CardTitle style={{ color: '#000', height: '176px', background: 'url(https://www.biernet.nl/images/brouwerij/55296-Bavaria%20logo.jpg) center / cover' }}></CardTitle>

                    <CardText><h4>Bavaria Cashback</h4>
                        <p>Tijdens mijn werkzaamheden bij Acorel Commerce in Alkmaar, heb ik met trots mee mogen werken aan het actieplatform van Bavria. Deze web-app is gebouwd in Java.</p></CardText>
                    <CardActions border>
                        <Button colored style={{ width: "100%" }} ><a href="https://cashback.bavaria.com">Website</a></Button>
                    </CardActions>

                </Card></div>
        )
    }
    else if (this.state.activeTab === 2) {
        return (
            <div>{/*Python*/}
                <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
                    <CardTitle style={{ color: '#000', height: '176px', background: 'url(https://indigo.amsterdam/wp-content/uploads/2017/05/python-django-logo-1024x576.jpg) center / cover' }}></CardTitle>

                    <CardText><h4>Foodify</h4>
                        <p>Foodify is een schoolproject gebouwd voor het vak Praktijkvaardigheden 2. Deze applicatie is gebouwd zodat mensen die te veel hebben gekookt en mensen die niet hebben gekookt elkaar tegemoetkomen. Het doel is om voedselverspilling te voorkomen.</p></CardText>
                    <CardActions border>
                        <Button colored style={{ width: "100%" }} ><a href="https://github.com/aminaloui/Foodify-Praktijk-2-">Github</a></Button>
                    </CardActions>

                </Card></div>
        )
    }
    }  

}

export default project;

projecten.js code:

import React, { Component } from 'react';
import Project, {toggleCattegories} from './project';
import { Tabs, Tab, Grid, Cell, Card, CardTitle, CardActions, Button, CardText } from 'react-mdl';


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

    render() {
        return (
            <div className="category-tabs">
                <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
                    <Tab>Html / Css/ ReactJS</Tab>
                    <Tab>Java</Tab>
                    <Tab>Python / Django</Tab>
                </Tabs>


                <Grid>
                    <Cell col={6} hidePhone="true" hideTablet="true" >
                        <div className="content"> <toggleCattegories/> </div>

                    </Cell>

                </Grid>

                <Grid>
                    <Cell col={2} phone={6} hideDesktop="true" hideTablet="true" >
                        <div className="content">{this.toggleCategoriesMobile()} </div>

                    </Cell>

                </Grid>
                <Grid>
                    <Cell col={6} tablet={8} hideDesktop="true" hidePhone="true" >
                        <div className="content">{this.toggleCategoriesTablet()} </div>

                    </Cell>

                </Grid>





            </div>
        )
    }
}



export default Projecten;

Thank you for your help!

Answer 1

You are not using Project correctly.

You have a toggleCategories function that should be renamed to render . Class components must have a render function that returns the JSX.

Once you have renamed the above, you no longer import { toggleCategories } , you only need to import Project and where you have <toggleCategories /> , replace it with <Project />