Question

我正在尝试导出和导入项目中的组件，但我没有。

我的主要应用程序的代码：

import React, { Component } from 'react';
import './App.css';
import Search from './Search';

export default class App extends Component {
  constructor() {
    super();

    const peoples =[{id:0, name:"Jean"}, 
    {id:1, name:"Jaquinha"}, 
    {id:2, name:"Ricardo"}, 
    {id:3, name:"JaCA"}, 
    {id:4, name:"Letiiicia"}, 
    {id:5, name:"Dai"}, 
    {id:6, name:"Da iIIane"}, 
    {id:7, name:"Tamy"}, 
    {id:8, name:"Tamyresss"},
    {id:9, name:"Tamyres"}, 
    {id:10, name:"Abeu"}, 
    {id:11, name:"Abellll"}];
    
    this.state = {
      elementsPerPage:3,
      currentPage:0,
      peoples,
      input: "",
      filtered: peoples,
    };
    
  } 
  
  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
    this.filterNames(inputValue);
  }
  
  filterNames = (inputValue) => {
    const { peoples } = this.state;
    this.setState({
      filtered: peoples.filter(item => 
        item.name.includes(inputValue)),
        currentPage:0
      });
}

我想导入其他文件的函数，名为Search，函数：getValueInput和filterNames以及之后导入我的render()：

render() {
 return (
  <div>
   <Search/>
  </div>
 )

页面Search.js：

import React, { Component } from 'react';
import {App} from './App'

export class Search extends React.Component{
    constructor(){
        super()
        
    }
    
    getValueInput = (evt) => {
        const inputValue = evt.target.value;
        this.setState({ input: inputValue });
        this.filterNames(inputValue);
    }
    
    filterNames = (inputValue) => {
        const { peoples } = this.state;
        this.setState({
            filtered: peoples.filter(item => 
                item.name.includes(inputValue)),
                currentPage:0
            });
        }
        
        render (){
            return(
                
                <div>
                <input type="text" onChange={ this.getValueInput }></input>
                <ul>Names: {this.elementsOnScreen()}</ul>
                
                </div>
            )
            
        }
    }
    
    export default Search;

但是在页面Search.js中提供错误而不起作用：

第1行：'组件'已定义，但从未使用过no-unused-vars 第2行：'App'已定义，但从未使用过no-unused-vars

我希望具有相同的功能，但需要使用分隔文件。

有人会帮助我吗？

Answer 1

如果您尝试在两个不同的文件中使用相同的功能，最好将该功能放入单独的文件中，然后导出/导入App.js和Search.js。

通常，class或Component中的函数旨在用于该类。这是类的好处之一，因为它允许函数保持更“私密”。

以下是一种方法：

<强> filters.js

// Here I am creating separate functions not tied to either
// class and exporting them from the file.

const getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
    this.filterNames(inputValue);
}

const filterNames = (inputValue) => {
    const { peoples } = this.state;
    this.setState({
        filtered: peoples.filter(item => item.name.includes(inputValue)),
        currentPage: 0
    });
}

export default { getValueInput, filterNames };

<强> App.js

import React, { Component } from 'react';
import './App.css';
import Search from './Search';

// Import the function.
import { getValueInput, filterNames } from './path/filters';

export default class App extends Component {
    constructor() {
        super();

        const peoples = [
            {id:0, name:"Jean"}, 
            {id:1, name:"Jaquinha"}, 
            {id:2, name:"Ricardo"}, 
            {id:3, name:"JaCA"}, 
            {id:4, name:"Letiiicia"}, 
            {id:5, name:"Dai"}, 
            {id:6, name:"Da iIIane"}, 
            {id:7, name:"Tamy"}, 
            {id:8, name:"Tamyresss"},
            {id:9, name:"Tamyres"}, 
            {id:10, name:"Abeu"}, 
            {id:11, name:"Abellll"}
        ];

        this.state = {
            elementsPerPage: 3,
            currentPage: 0,
            peoples,
            input: "",
            filtered: peoples,
        };

        // Bind the functions to the class.
        this.getValueInput = getValueInput.bind(this);
        this.filterNames = filterNames.bind(this);
    }

    render() {
        return (
            <div>
                <input onChange={this.getValueInput} className="someInput" />
                <Search />
            </div>
        )
    }
}

<强> Search.js

import React, { Component } from 'react';

// import the functions.
import { getValueInput, filterNames } from './path/filters';

export class Search extends Component {
    constructor() {
        super()

        const peoples = [
            // ...
        ]

        this.state = {
            elementsPerPage: 3,
            currentPage: 0,
            peoples,
            input: "",
            filtered: peoples,
        };

        // Bind the functions to the class.
        this.getValueInput = getValueInput.bind(this);
        this.filterNames = filterNames.bind(this);
    }

    render() {
        return( 
            <div>
                <input type="text" onChange={ this.getValueInput }></input>
                <ul>Names: {this.elementsOnScreen()}</ul>
            </div>
        )       
    }
}

export default Search;

使用这种方法，您的代码将保持“干”状态，您可以在每个类中使用该功能。您需要确保每个类中的状态也具有适当的值。

编辑：另外，请参阅下面的评论，了解如何摆脱您收到的警告。

如何在ReactJS中导入和导出组件（函数）？

1 个答案: