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

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;

---

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

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