How to pass in a react component into another react component to transclude the first component s content

Question

Is there a way to pass one component into another react component   I want to create a model react component and pass in another react component in order to transclude that content     Edit  Here is a reactJS codepen illustrating what I m trying to do  http   codepen io aallbrig pen bEhjo    HTML     lt div id  my-component  gt        lt p gt Hi  lt  p gt    lt  div gt       ReactJS        jsx React DOM      var BasicTransclusion   React createClass      render  function             Below  Added title  should be the child content of  lt p gt Hi  lt  p gt       return           lt div gt            lt p gt  Added title  lt  p gt            this props children          lt  div gt                      React renderComponent BasicTransclusion    document getElementById  my-component

User · Accepted Answer

You can use this props children to render whatever children the component contains   const Wrap      children      gt   lt div gt  children  lt  div gt   export default      gt   lt Wrap gt  lt h1 gt Hello word lt  h1 gt  lt  Wrap gt

User · Answer

You can pass in a component via  the props and render it with interpolation   var DivWrapper   React createClass       render  function             return  lt div gt   this props child   lt  div gt               You would then pass in a prop called child  which would be a React component

User · Answer

i prefer using React built-in API   import React   cloneElement  Component  from  react   import PropTypes from  prop-types    export class Test extends Component     render         const  children  wrapper    this props      return         cloneElement wrapper               wrapper props          children                        Test propTypes       wrapper  PropTypes element           other props     Test defaultProps       wrapper   lt div  gt            other props      then you can replace the wrapper div with what ever you want     lt Test wrapper   lt span className  LOL   gt   gt     lt div gt child1 lt  div gt     lt div gt child2 lt  div gt   lt  Test gt

User · Answer

Actually  your question is how to write a Higher Order Component  HOC   The main goal of using HOC is preventing copy-pasting  You can write your HOC as a purely functional component or as a class here is an example       class Child extends Component       render             return                lt div gt                  Child              lt  div gt                       If you want to write your parent component as a class-based component       class Parent extends Component       render             return                lt div gt                   this props children               lt  div gt                       If you want to write your parent as a functional component       const Parent props  gt       return           lt div gt               props children           lt  div gt

User · Answer

You can pass your component as a prop and use the same way you would use a component  function General props                return   lt props substitute a  A  b  B    gt       function SpecificA props          function SpecificB props            lt General substitute SpecificA   gt   lt General substitute SpecificB   gt

User · Answer

Late to the game  but here s a powerful HOC pattern for overriding a component by providing it as a prop  It s simple and elegant   Suppose MyComponent renders a fictional A component but you want to allow for a custom override of A  in this example B  which wraps A in a  lt div gt     lt  div gt  and also appends     to the text prop   import A from  fictional-tooltip    const MyComponent   props   gt       lt props A text  World  gt Hello lt  props A gt     MyComponent defaultProps     A     const B   props   gt       lt div gt  lt A     props  text  props text        gt  lt  div gt      ReactDOM render  lt MyComponent A  B   gt

User · Answer

Note I provided a more in-depth answer here  Runtime wrapper   It s the most idiomatic way    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        gt   lt div gt Hello lt  div gt    const WrappedApp        gt       lt Wrapper gt       lt App  gt     lt  Wrapper gt       Note that children is a  special prop  in React  and the example above is syntactic sugar and is  almost  equivalent to  lt Wrapper children   lt App  gt    gt     Initialization wrapper   HOC  You can use an Higher Order Component  HOC   They have been added to the official doc recently      Signature may look fancy but it s just     a function that takes a component and returns a new component const wrapHOC    WrappedComponent    gt   props    gt       lt div gt       lt div gt header lt  div gt       lt div gt  lt WrappedComponent     props   gt  lt  div gt       lt div gt footer lt  div gt     lt  div gt     const App        gt   lt div gt Hello lt  div gt    const WrappedApp   wrapHOC App     This can lead to  little  better performances because the wrapper component can short-circuit the rendering one step ahead with shouldComponentUpdate  while in the case of a runtime wrapper  the children prop is likely to always be a different ReactElement and cause re-renders even if your components extend PureComponent   Notice that connect of Redux used to be a runtime wrapper  but was changed to an HOC because it permits to avoid useless re-renders if you use the pure option  which is true by default   You should never call an HOC during the render phase because creating React components can be expensive  You should rather call these wrappers at initialization     Note that when using functional components like above  the HOC version do not provide any useful optimisation because stateless functional components do not implement shouldComponentUpdate  More explanations here  https   stackoverflow com a 31564812 82609

User · Answer

Here is an example of a parent List react component and whos props contain a react element  In this case  just a single Link react component is passed in  as seen in the dom render    class Link extends React Component     constructor props       super props         render        return          lt div gt           lt p gt  this props name  lt  p gt         lt  div gt                class List extends React Component     render       return       lt div gt          this props element          this props element       lt  div gt               ReactDOM render     lt List element     lt Link name    working   gt    gt     document getElementById  root

User · Answer

const ParentComponent    props    gt      return       props childComponent           additional JSX             import component import MyComponent from      where ever    place in var const myComponent    lt MyComponent   gt     pass as prop  lt ParentComponent childComponent  myComponent    gt

User · Answer

Facebook recommends stateless component usage Source  https   facebook github io react docs reusable-components html     In an ideal world  most of your components would be stateless   functions because in the future we   ll also be able to make performance   optimizations specific to these components by avoiding unnecessary   checks and memory allocations  This is the recommended pattern  when   possible    function Label props       return  lt span gt  props label  lt  span gt      function Hello props       return  lt div gt  props label  props name  lt  div gt      var hello   Hello  name  Joe   label Label  label  I am         ReactDOM render hello mountNode

User · Answer

You can pass it as a normal prop  foo   lt ComponentOne   gt    For example   const ComponentOne        gt   lt div gt Hello world  lt  div gt  const ComponentTwo        gt       lt div gt       lt div gt Hola el mundo  lt  div gt       lt ComponentThree foo   lt ComponentOne   gt     gt     lt  div gt    const ComponentThree      foo      gt   lt div gt  foo  lt  div gt

[javascript] How to pass in a react component into another react component to transclude the first component's content?

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components