javascript - How do i render a react component passed in as a props with additional props?

Question

I have a Foo component inside Bar component

import Foo from './foo';    
<Bar component={Foo}>

Now, i want to render this.props.component with additional props, foobar = 'LOL';

Something like this

<this.props.component foobar='LOL'/>

I found 3 ways to do it.

Clone

render(){ 
let newFoo = {...this.props.component}
newFoo.props = {...newFoo.props, foobar: 'LOL'}}
return(<div> {newFoo}</div>);}

But i don't want to clone.

Callback

render(){ 
!this.props.component.props.foobar&&this.props.addPropsToFoo(foobar: 'LOL');
return(<div> {this.props.component}</div>);

But, i do not want to use callback in this case.

HOC, but i'm intern and this is advanced guide.

标签： javascriptreactjs

Answer 1

如果你有一个像

import Foo from './foo';    
<Bar component={Foo}>

您将没有任何道具，因此您可以如下Foo呈现组件Foo

const Comp = this.props.component;

<Comp foobar='LOL' />

这样，您也不会克隆组件。