如何在 React js 中重用任何类或函数

Question

我是新来的反应。当我搜索谷歌如何重用类或函数？然后像使用道具重用函数或类的答案......如何在不使用道具或任何其他方式使用实用程序函数反应js的情况下重用函数或类......？只需重用函数或类，如“java继承”。 但是这里有些问题 例如：

import B from './B';
export class A extends Component {
alertMsg=()=>{

}

render(){
  return(
    <div>
      <B alertMsg={this.alertMsg} /> ---> error maximum size exceeded 
.. [ B class have multiple tag ]
     </div>
  );
 }
}


import A from './A';
export class B extends Component {

someFun=()=>{
  this.props.alertMsg(); --> error undefined function
}

render(){
  return(
    <div>
    <A property={1} property={2} property={3}/>
    </div>
  );
 }
}

如何重用函数或类 react js --> [ A.alertMsg(); ] 这是我的文件：

utility.js

import React, {Component} from "react";

import {
  Pagination,
  PaginationItem,
  PaginationLink,
  Alert
} from "reactstrap";


export class  AlertMsg extends Component {
  constructor(props) {
    super(props);
    this.onAlert = this.onAlert.bind(this);
    this.state = {
      message : this.props.message,
      color   : this.props.color,
      visible : false
    }
  }

    // I need this alert function another component ..how can i reuse 
 this function
   onAlert=() => {
  this.setState({visible : true});
  setTimeout(() => {
    this.setState({ visible: !this.state.visible });
  }, 5000);
    console.log("visible--->"+this.state.visible);
 }

 render(){
  return(
    <div className="animated fadeIn">
    <Alert color={this.state.color} isOpen={this.state.visible} >
      {this.state.message}
    </Alert>
    <EmployeeList onAlert={this.onAlert} /> // when i use like this it will be an error..[ InternalError: too much recursion.] sometime maximum size exceeded
    </div>
       );
     }
  }

export class Pagination extends Component {

}

export class SomeOther_A extends Component {

}

export class SomeOther_B extends Component {

}

export class SomeOther_C extends Component {

}

export class SomeOther_D extends Component {

}
----------------------------------------------------------------------
EmployeeList.js

import React, {Component} from "react";

import { SomeOther_A, SomeOther_B, SomeOther_C, AlertMsg } from 
'utility';

export default class EmployeeList extends Component {

 constructor(props){
    super(props);

     this.someFuntion = this.someFuntion.bind(this);

      this.state = {    

         color   : '',
         message : ''

      }
    }

    componentDidMount(){
    // doSomething...
  }

    someFuntion = () => {
    // doSomething...
  }

    addEmployee = () =>{
     fetch(url,{
     method  : 'post',
     headers :{
     'Accept'      : 'application/json',
     'Content-Type': 'application/json'
    },
    body    : JSON.stringify(EmpInfo)
   })
   .then(res => {
     if(res.status === 200){
     var successMsg = "Successfully added Employee ..";
     var clor = "success";
     this.setState({ message: successMsg });
     this.setState({ color: clor});
     this.props.onAlert(); ---> not working this funtion...error 
     undefined funtion

     // AlertMsg.onAlert();--> how to use like this...or anyother best 
   way to reuse any utility class or funtion ?
     }
    })
    .catch(error => {
       var errMsg = "Fail to added Employee .. " + error;
       var clor = "danger";
       this.setState({ message: errMsg });
       this.setState({ color: clor});
       this.props.onAlert; ---> funtion from utility.js
    })
   }

    getEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    updateEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    deleteEmp = () => {
     // doSomething...
     //AlertMsg.onAlert() --> need this funtion here
    }

    render(){
    return(
        <div>
            <AlertMsg message={this.state.message} color=
     {this.state.color}/>
         // here multiple html tag....here...

        </div>

    );
    }
 }

Answer 1

在 Facebook，我们在数以千计的组件中使用 React，我们还没有发现任何建议创建组件继承层次结构的用例。

道具和组合为您提供了以明确和安全的方式自定义组件外观和行为所需的所有灵活性。请记住，组件可以接受任意 props，包括原始值、React 元素或函数。

如果您想在组件之间重用非 UI 功能，我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数、对象或类，而无需扩展它。

来自 Reactjs 文档。

如果必须，请考虑客户端。 Babylon 和 webpack（或其他工具）将代码编译到 es5 标准的一个文件中。就是普通的js文件。