React js Wrapping one component into another

Question

Many template languages have  slots  or  yield  statements  that allow to do some sort of inversion of control to wrap one template inside of another     Angular has  transclude  option     Rails has yield statement  If React js had yield statement  it would look like this     var Wrapper   React createClass      render  function          return           lt div className  wrapper  gt           before             lt yield  gt           after         lt  div gt                       var Main   React createClass      render  function          return           lt Wrapper gt  lt h1 gt content lt  h1 gt  lt  Wrapper gt                         Desired output      lt div class  wrapper  gt     before       lt h1 gt content lt  h1 gt     after   lt  div gt       Alas  React js doesn   t have a  lt yield  gt   How do I define Wrapper component to achieve the same output

User · Accepted Answer

Try   var Wrapper   React createClass     render  function         return          lt div className  wrapper  gt          before            this props children          after        lt  div gt                   See Multiple Components  Children and Type of the Children props in the docs for more info

User · Answer

Using children  const Wrapper     children     gt       lt div gt       lt div gt header lt  div gt       lt div gt  children  lt  div gt       lt div gt footer lt  div gt     lt  div gt      const App     name     gt   lt div gt Hello  name  lt  div gt    const WrappedApp     name     gt       lt Wrapper gt       lt App name  name   gt     lt  Wrapper gt      render  lt WrappedApp name  toto   gt  node     This is also known as transclusion in Angular   children is a special prop in React and will contain what is inside your component s tags  here  lt App name  name   gt  is inside Wrapper  so it is the children  Note that you don t necessarily need to use children  which is unique for a component  and you can use normal props too if you want  or mix props and children   const AppLayout     header footer children     gt       lt div className  app  gt       lt div className  header  gt  header  lt  div gt       lt div className  body  gt  children  lt  div gt       lt div className  footer  gt  footer  lt  div gt     lt  div gt      const appElement        lt AppLayout      header   lt div gt header lt  div gt       footer   lt div gt footer lt  div gt      gt       lt div gt body lt  div gt     lt  AppLayout gt      render appElement node     This is simple and fine for many usecases  and I d recommend this for most consumer apps     render props  It is possible to pass render functions to a component  this pattern is generally called render prop  and the children prop is often used to provide that callback   This pattern is not really meant for layout  The wrapper component is generally used to hold and manage some state and inject it in its render functions   Counter example   const Counter        gt       lt State initial  0  gt        val  set    gt           lt div onClick       gt  set val   1   gt            clicked  val  times        lt  div gt            lt  State gt        You can get even more fancy and even provide an object   lt Promise promise  somePromise  gt           loading       gt   lt div gt     lt  div gt       success   data    gt   lt div gt  data something  lt  div gt       error   e    gt   lt div gt  e message  lt  div gt         lt  Promise gt    Note you don t necessarily need to use children  it is a matter of taste API    lt Promise    promise  somePromise    renderLoading       gt   lt div gt     lt  div gt     renderSuccess   data    gt   lt div gt  data something  lt  div gt     renderError   e    gt   lt div gt  e message  lt  div gt     gt    As of today  many libraries are using render props  React context  React-motion  Apollo     because people tend to find this API more easy than HOC s  react-powerplug is a collection of simple render-prop components  react-adopt helps you do composition     Higher-Order Components  HOC    const wrapHOC    WrappedComponent    gt      class Wrapper extends React PureComponent       render           return            lt div gt             lt div gt header lt  div gt             lt div gt  lt WrappedComponent     this props   gt  lt  div gt             lt div gt footer lt  div gt           lt  div gt                         return Wrapper     const App     name     gt   lt div gt Hello  name  lt  div gt    const WrappedApp   wrapHOC App    render  lt WrappedApp name  toto   gt  node     An Higher-Order Component   HOC is generally a function that takes a component and returns a new component   Using an Higher-Order Component can be more performant than using children or render props  because the wrapper can have the ability to short-circuit the rendering one step ahead with shouldComponentUpdate    Here we are using PureComponent  When re-rendering the app  if the WrappedApp name prop does not change over time  the wrapper has the ability to say  I don t need to render because props  actually  the name  are the same as before   With the children based solution above  even if the wrapper is PureComponent  it is not the case because the children element is recreated everytime the parent renders  which means the wrapper will likely always re-render  even if the wrapped component is pure  There is a babel plugin that can help mitigate this and ensure a constant children element over time     Conclusion  Higher-Order Components can give you better performance  It s not so complicated but it certainly looks unfriendly at first   Don t migrate your whole codebase to HOC after reading this  Just remember that on critical paths of your app you might want to use HOCs instead of runtime wrappers for performance reasons  particularly if the same wrapper is used a lot of times it s worth considering making it an HOC   Redux used at first a runtime wrapper  lt Connect gt  and switched later to an HOC connect options  Comp  for performance reasons  by default  the wrapper is pure and use shouldComponentUpdate   This is the perfect illustration of what I wanted to highlight in this answer   Note if a component has a render-prop API  it is generally easy to create a HOC on top of it  so if you are a lib author  you should write a render prop API first  and eventually offer an HOC version  This is what Apollo does with  lt Query gt  render-prop component  and the graphql HOC using it   Personally  I use both  but when in doubt I prefer HOCs because    It s more idiomatic to compose them  compose hoc1 hoc2  Comp   compared to render props It can give me better performances I m familiar with this style of programming    I don t hesitate to use create HOC versions of my favorite tools    React s Context Consumer comp Unstated s Subscribe using graphql HOC of Apollo instead of Query render prop   In my opinion  sometimes render props make the code more readable  sometimes less    I try to use the most pragmatic solution according to the constraints I have  Sometimes readability is more important than performances  sometimes not  Choose wisely and don t bindly follow the 2018 trend of converting everything to render-props

User · Answer

In addition to Sophie s answer  I also have found a use in sending in child component types  doing something like this   var ListView   React createClass       render  function             var items   this props data map function item                return this props delegate  data item              bind this            return  lt ul gt  items  lt  ul gt              var ItemDelegate   React createClass       render  function             return  lt li gt  this props data  lt  li gt             var Wrapper   React createClass           render  function             return  lt ListView delegate  ItemDelegate  data  someListOfData    gt

[javascript] React.js: Wrapping one component into another

Examples related to javascript

Examples related to template-engine

Examples related to composition

Examples related to reactjs

Examples related to transclusion

Examples related to higher-order-components