反応するjs内のどのクラスや関数を再利用するか

Question

私は新しい反応があります。私はGoogleを検索するときどのようにクラスや機能を再利用する？次に、関数やクラスを再利用するための小道具の使用のような答え...小道具や他の方法を使わずに関数やクラスを再利用する方法は、実用的な関数を使用して反応する。単に "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> 
); 
} 
} 

どのように私は、関数やクラスがJSを反応させ再利用することができます - > [A.alertMsg（）; ] ここに私のファイルです：Facebookので

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

、我々は、使用するコンポーネントの数千人に反応し、我々はコンポーネントの継承階層を作成することをお勧めしますすべてのユースケースを発見していません。

小道具と構成は、明示的かつ安全な方法でコンポーネントの外観と動作をカスタマイズするために必要なすべての柔軟性を提供します。コンポーネントは、プリミティブ値、リアクション要素、関数などの任意の小道具を受け入れることができます。

コンポーネント間でUI以外の機能を再利用する場合は、別のJavaScriptモジュールにそのUIモジュールを抽出することをおすすめします。コンポーネントはそれをインポートし、その関数、オブジェクト、またはクラスを拡張せずに使用することができます。

Reactjsのドキュメント。

あなたがする必要がある場合は、クライアント側について考えてください。 Babylonとwebpack（または他のツール）は、コードをes5標準の1つのファイルにコンパイルします。それはちょうど普通のjsファイルです。