コードを変更せずに再利用可能な反応コンポーネントを使用し、プロパティのみを使用する

Question

コードを変更せずに（他のプロパティを渡すだけで）他のプロジェクトにも再利用できるコンポーネントを作成したいと思います。 小さな例：これは、ログインフォームの最小バージョンです

class Login extends Component { 

    static propTypes = { 
    login: PropTypes.func.isRequired, 
    defaultEmailValue: PropTypes.string, 
    defaultPasswordValue: PropTypes.string, 
    }; 

    handleSubmit = (event) => { 
    if (event) { 
     event.preventDefault(); 
    } 

    const username = this.refs.username; 
    const password = this.refs.password; 
    this.props.login(username.value, password.value); 
    }; 


    render() { 
    const { 
     defaultEmailValue, 
     defaultPasswordValue, 
     } = this.props; 

    return (
     <form method="post"> 
     <input defaultValue={defaultEmailValue} ref="username" type="email" /> 
     <input defaultValue={defaultPasswordValue} ref="password" type="password" /> 
     <button onClick={this.handleSubmit} type="submit">Submit</button> 
     </form> 
    ); 
    } 
} 

が、何をすべきかとき： 私は、ユーザー名の入力と、次のように例を探すことができ、パスワードの入力を持つログインフォームを持っています私は、この（追加された列タグ）のようなコンテナコンポーネントを追加するために、レンダリング機能を拡張したい：

class Login extends Component { 

    /*....*/ 

    render() { 
    const { 
     defaultEmailValue, 
     defaultPasswordValue, 
     } = this.props; 

    return (
     <form method="post"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <input defaultValue={defaultEmailValue} ref="username" type="email" /> 
      </div> 
      <div class="col-md-6"> 
       <input defaultValue={defaultPasswordValue} ref="password" type="password" /> 
      </div> 
     </div> 
     <button onClick={this.handleSubmit} type="submit">Submit</button> 
     </form> 
    ); 
    } 
} 

そこで私はレンダリング機能を変更することは常に持っています。プロパティでのみこれを行う可能性はありますか？ 私は、これをWrapperコンポーネントを使ってLoginコンポーネント上で行うと推定されていましたが、私はいつも完全なレンダリング関数を書き直してきました。 私が考えた次の解決策は、ラッパーコンポーネントクラスをレンダリングできるプロパティを通して渡すことです。しかしこれは良い解決策なのでしょうか、それともこの悪い習慣ですか？

インターネットでこのチュートリアルの実際の解決策は見つからなかったので、ここで試してみます。ありがとうございます:-)

Answer 1

プロパティでのみこれを行う可能性はありますか？

代表コンポーネントは、この種のものです。

export default const LoginForm = (/**props**/ {username, email, submitHandler, errors}) => { 
    return (
    <form> 
     {/* as usual */} 
    </form> 
) 
} 

あなたContainerComponentでの使用：

... 
render() { 
    return (
    <div className="loginWrapper"> 
     <LoginForm ...this.props ...this.state ...whatever username="pete" /> 
    </div> 
) 
} 
...