react.js 无法导入组件

Posted 2023-02-21

【中文标题】react.js 无法导入组件

【英文标题】：react.js can't import component

【发布时间】：2022-01-23 23:50:17

【问题描述】：

我正在尝试使用 export default project; 导出组件并使用导入

import project, toggleCattegories from './project';

我收到以下警告：

./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 代码：

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 代码：

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;

感谢您的帮助！

【问题讨论】：

这是因为它是“已定义但从未使用”，就像错误所说的那样。如果您不需要它，请将其删除。

第 2 点，与您的错误消息无关，但值得您了解：按照惯例，所有 React 组件都必须以大写字母开头。

我正在使用它，我正在尝试使用

渲染导入的组件

您没有使用错误状态的“项目”。这是一个未使用的导入，删除它。 完全按照错误消息告诉您的操作。

我认为您不了解代码中的问题所在。我想通过从“project.js”渲染一个组件来使用“project”，但它不起作用。

【参考方案1】：

你没有正确使用Project。

你有一个toggleCategories 函数，应该重命名为render。类组件必须有一个返回 JSX 的render 函数。

上面的重命名后，不再导入 toggleCategories ，只需要import Project，在你有<toggleCategories />的地方，替换成<Project />

【讨论】：

如果我使用渲染而不是切换类别，构造函数不起作用。

对于格式蹩脚的答案深表歉意，我正在使用手机：D 如果它解决了您的问题，请随时投票并接受；)

感谢您的帮助，但如果我使用渲染而不是切换类别，则构造函数不起作用。

构造函数不起作用是什么意思？

在“project.js”中，我有一个构造函数，其状态设置为 activeTab。当我只渲染 toggleCategories 函数时，activeTab 不再起作用。