reactjs - Design Pattern Help: How to render dynamic views from a single controller component? -

i current have component holds business logic, depending on page, i'd render different views. i'm having trouble since i'm not sure how elegantly pass functions , props of control component view component.

right now, solution is:

<controller viewcomponent={viewcomponent} /> 

and rendering inside controller:

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

it works, it's confusing , i'm not elegant solution. there's solution cloning, seems hack too.

does have insight how solve this?

why not do:

<controller> <viewcomponent ... /> </controller>

and in controller's render function:

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

update: if want pass parents functions , state/props children use react.children.map func.

renderchildren = () => {   react.children.map(this.props.children, (c) => {     <c.type       {...this.props}       {...c.props}       somefunction={this.somefunction}     />   } }  <div> { this.renderchildren() } </div>