Design Pattern Help：単一のコントローラコンポーネントからダイナミックビューをレンダリングする方法は？

Question

私は現在、ビジネスロジックを保持するコンポーネントを持っています。ページによっては、別のビューをレンダリングしたいと思います。コントロールコンポーネントの関数と小道具をビューコンポーネントにエレガントに渡す方法がわからないので、私は問題があります。

は今のところ、私の解決策は次のとおりです。

<this.props.viewComponent function1={this.func} function2={this.func2} /> 

それは動作しますが、それは混乱だと私はそのことで最もエレガントな解決策はほぼ確実だ：

<Controller viewComponent={ViewComponent} /> 

そして、内部コントローラをレンダリングします。クローニングのソリューションもありますが、それはハックのようにも見えます。

これを解決する方法についての洞察はありますか？

Answer 1

なぜだけではなく、実行します。

<Controller> <ViewComponent ... /> </Controller>

、コントローラの中には、機能をレンダリング：

<div> {this.props.children} </div>

更新：あなたは子供たちに、親機能と状態/小道具を渡す場合React.Children.map関数を使用します。

renderChildren =() => { 
    React.Children.map(this.props.children, (c) => { 
    <c.type 
     {...this.props} 
     {...c.props} 
     someFunction={this.someFunction} 
    /> 
    } 
} 

<div> 
{ this.renderChildren() } 
</div> 

Answer 2

react-routerのようなものを使用したいと思うかもしれません。 react-routerを使用すると、訪問先のURLに応じて異なるReactコンポーネントをレンダリングするクライアント側ルーティングを実行できます。

たとえば、このコンポーネントは、あなたのルートを定義するために使用され、どのような構成要素は、それらを表すために使用されるであろう：このコンポーネントは、小道具を渡すために使用される

import {render} from 'react-dom'; 
import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 
import App from './app'; 
import Home from './home'; 
import Account from './account'; 

render((
    <Router history={hashHistory}> 
     <Route path='/' component={App}> 
      <IndexRoute component={Home}/> 
      <Route path='/account:username' component={Account}/> 
     </Route> 
    </Router> 
), document.getElementById('react-root')); 

index.js React.Childrenを介してレンダリングされた任意の動的レンダリングされたコンポーネント（機能のリストなど）に転送することができます。

app.js

import React from 'react'; 

function getFunctionList() { 
    return { 
     someFunction() { 
      //do something 
     }, 
     someOtherFunction() { 
      //do something 
     } 
    }; 
} 

function renderComponent() { 
    return React.Children.map(this.props.children, child => 
     React.cloneElement(child, ...getFunctionList()) 
    ); 
} 

export default class extends React.Component { 
    render() { 
     return (
      <div className='wrapper'> 
       <nav> 
        <ul> 
         <li><Link to={'/home'}>Home</Link></li> 
         <li><Link to={`/account/foo`}>foo's Account</Link></li> 
        </ul> 
       </nav> 
       {renderComponent.call(this)} 
       <footer></footer> 
      </div> 
     ); 
    } 
}; 

そして、ここでルートが訪れているときにユーザーに表示されると思いコンポーネントのいくつかの簡単な例です：

home.js account.js

import React from 'react'; 

export default class extends React.Component { 
    render() { 
     //you could call this.props.someFunction() here 
     return (
      <div className='home'> 
       Home Page 
      </div> 
     ); 
    } 
}; 

は、

import React from 'react'; 

export default class extends React.Component { 
    const {username} = this.props.params; 

    render() { 
     return (
      <div className='account'> 
       Viewing account for {username} 
      </div> 
     ); 
    } 
}; 

本当にあなたの最善の策は、このようなことをすることだと思います。あなたの問題は、反応ルータが解決するために作られた問題のように聞こえます。

希望する場合は、Reduxを使用して、アプリケーションの状態を管理できる単一のstoreを追跡することができます。反応ルータとの同期を保つために、this libraryも使用できます。

ご質問がありましたらお知らせください。