15

Trying to learn ReactJS.. but what confuses me is the rendering of the component. Every example I've seen defines a React component class and at the end has something like:

React.renderComponent(
  <comp attr="value"" />,
  document.getElementById('comp')
);

I understand that it replaces the 'comp' element with my component.. that's great. But it seems if I load 20 components, all 20 render. However, I only want to render some and not all, but use all throughout my SPA. I am using DirectorJS router, and depending on if a user logs in or not, and/or goes to certain links, I want to only show one or so of components. I can't seem to find any info/examples/tutorials on how to dynamically manage showing or hiding react components. More so, what i'd really like to do is load partials depending on links clicked and in those partials they would use react components, so only at that time load/use the component. Is this possible..if so how might I handle this? I could live with loading 20+ components one time the first time the app is loaded, but i'd prefer to only load them if the partial a component is displayed on is loaded.

user3317868
  • 696
  • 2
  • 9
  • 20

1 Answers1

26

First, render only what's necessary. It's easier to track and it's faster.

To actually "swap between pages", it's as simple as, well, setting a variable in your state/props, and use that var to conditionally render whatever you need. The role of selectively rendering whatever you want naturally goes to the parent component. Here's a working fiddle with Director: http://jsfiddle.net/L7mua/3/

Key part, in App:

render: function() {
  var partial;
  if (this.state.currentPage === 'home') {
    partial = <Home />;
  } else if (this.state.currentPage === 'bio') {
    partial = <Bio />;
  } else {
    // I don't know, your default page
    // if you don't assign anything to partial here, you'll render nothing
    // (undefined). In another situation you'd use the same concept to
    // toggle between show/hide, aka render something/undefined (or null)
  }
  return (
    <div>
      <div>I am a menu that stays here</div>
      <a href="#/home">Home</a> <a href="#/bio">Bio</a>
      {partial}
    </div>
  );
}

Notice that beyond the HTML-looking JSX syntax, you're really just using JavaScript. Conditionals still work, iterations still work, etc.

peterh
  • 11,875
  • 18
  • 85
  • 108
chenglou
  • 3,640
  • 2
  • 25
  • 33
  • Excellent. Thank you. So the React.renderComponent() part only sets up the element it will render to..but the render() method determines what and if it renders? – user3317868 Feb 27 '14 at 17:16
  • 1
    Without doing into the details, just think of `renderComponent` as that first `render` where you need to mount it into _some_ real DOM node. So really, it's not that special and, as an alternative structure, you could have the router be at the very top level (outside of any component) and do stuff like: '/home': React.renderComponent(, document.body); And like I said, conditionals stay conditionals. There's no arbitrary alternative syntax/concept you have to grasp. Feel free to use common JS logic =). – chenglou Feb 27 '14 at 17:54
  • In two comments you've pretty much demystified this for me. :) From all the examples, the renderComponent() is always in the same bit of code as the actual class creation so it wasn't clear to me that you could render the component in say a JS function at a time when you want to show it. So thank you for clearing that up! – user3317868 Feb 27 '14 at 23:23
  • Ok.. stuck one more time.. I removed the React.renderComponent(, document.getElementById('dialog')); from within the JS class the component is defined in. Instead I only want to call the rednerComponent in a JS function IF a user clicks on a given link that causes the dialog to show up. How do I change to the JS equivalent so that it will work in my JS function call? – user3317868 Feb 28 '14 at 05:50
  • Formatting's gonna be hard here. Can you split this into another question? – chenglou Feb 28 '14 at 20:28
  • Ok... http://stackoverflow.com/questions/22110886/how-to-render-reactjs-component-from-outside-of-js-class-its-defined-in-and-or – user3317868 Mar 01 '14 at 06:11
  • what about the lifecycle? would the state reset when a component is hidden? – Bruno Aug 30 '15 at 05:17
  • Inside of Bio or whatever, you can probably use the prop to determine whether render returns anything – neaumusic Jul 24 '16 at 14:39