リアクション - 同じレンダリングで異なるロジックを持つ2つのコンポーネント

Question

私はリアクトを使用していますが、問題が発生しました。 私はユーザーを追加するためのコンポーネントを持っています。

は、AddUser：

export default class AddUser extends React.Component { 
    onClick() { 
     // Save the user. 
    } 

    render() { 
     // Some components. 
    } 
} 

は、今私はEditUserに部品を実装する、renderメソッドは、小道具を通過することができ、ボタンのテキストを除いて、まったく同じです。 しかし、ロジックは異なります.onClickはapiとは別のURLにアクセスし、apiからユーザーの詳細をロードして状態にする必要があります。

私の質問は、これを正しく実装する方法です。 私はAddUserコンポーネントになるベースコンポーネントを作成することを考えました。そして、EditUserコンポーネントはそれを継承し、componentDidMountメソッドをオーバーライドしてAPIからデータをロードします。

そうするベストプラクティスは何ですか？

Answer 1

UserFormコンポーネントを作成し、onSave小道具を持っています。新しいユーザを追加するために、親コンポーネントは、追加ロジックに従ってonSaveを実装し、別の親コンポーネントを更新するために、それに応じて更新ロジックを実装することができる。 UserFormの保存ボタンの名前を別の小道具、たとえばisUpdateに変更することができます。

追加コンポーネント：

import UserForm from "./user_form" 
export default class AddUser extends React.Component { 
    addUser() { 
     // add the user 
    } 

    render() { 
     return <UserForm onSave={this.addUser.bind(this)}> 
    } 
} 

更新コンポーネント：

import UserForm from "./user_form" 
export default class UpdateUser extends React.Component { 
    updateUser() { 
     // add the user 
    } 

    render() { 
     return <UserForm onSave={this.updateUser.bind(this)} isUpdate> 
    } 
} 

Answer 2

は、念のためにユーザーの値を保持するであろう親コンポーネント基本的にモデルオブジェクトから小道具を渡し、同じコンポーネントは、AddUserを保持編集の

親コンポーネントが小道具

export default class AddUser extends React.Component { 
    constructor(props){ 
     this.state = { 
      firstName: this.props.user ?this.props.user.firstName: '' 
     } 
    } 
    onClick() { 
     // Save the user. 
     if (this.props.user) { 
     //edit user case 
    } else { 
     //add user case 
    } 
    } 

    render() { 
     // Some components. 
    } 
}