Wie jede Klasse oder Funktion in react js

Question

Ich bin neu zu reagieren. Wenn ich suche Google Wie Klasse oder Funktion wieder zu verwenden?. Dann die Antwort wie Requisiten verwenden, um Funktion oder Klasse wieder zu verwenden ... wie Funktion oder Klasse ohne Verwendung von Requisiten oder einer anderen Möglichkeit, Dienstprogrammfunktion zu verwenden, react js ..? Einfach Funktion oder Klasse wie "Java-Vererbung" wiederverwenden. Aber hier ein Problem Ex:

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> 
); 
} 
} 

Wie kann ich wieder verwenden Funktion oder Klasse reagieren js -> [A.alertMsg(); ] hier ist meine Datei:

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

Bei Facebook verwenden wir in tausenden von Komponenten reagieren, und wir haben alle Anwendungsfälle nicht gefunden, wo wir Komponente Erbe zu schaffen Hierarchien empfehlen würde.

Requisiten und Zusammensetzung bieten Ihnen alle Flexibilität, die Sie benötigen, um das Aussehen und Verhalten einer Komponente auf explizite und sichere Weise anzupassen. Denken Sie daran, dass Komponenten beliebige Props annehmen können, einschließlich primitiver Werte, React-Elemente oder Funktionen.

Wenn Sie Nicht-UI-Funktionen zwischen Komponenten wiederverwenden möchten, empfehlen wir, sie in ein separates JavaScript-Modul zu extrahieren. Die Komponenten können sie importieren und diese Funktion, das Objekt oder eine Klasse verwenden, ohne sie zu erweitern.

Aus Reactjs Dokumentation.

Wenn Sie müssen, denken Sie an Client-Seite. Babylon und Webpack (oder andere Tools) kompilieren Code in einer Datei im es5-Standard. Es ist nur eine normale js-Datei.