title: [React]Container Component design
body: <p>I have 3 components in a html page.</p>
  
  <p><strong>A,B,C</strong></p>
  
  <p>By the PSD desgin ,in the <code>DOM</code> level , <code>A includes B and B includes C.</code></p>
  
  <p>so in the React level , I'd like to design component tree as follow:</p>
  
  <pre><code>A(stateful component) -&gt;B (stateless component) -&gt;C (stateless component)
  </code></pre>
  
  <p>I will make <code>A</code> <strong>redux-aware</strong> by <code>connect</code> method and hand down the redux state <code>to B then -&gt; C</code>.</p>
  
  <p>However many guides recommend that <strong>a stateful component can only contain stateless components</strong> whereas there's no mentioned whether:</p>
  
  <p><strong>1. a stateless component can contain another stateless component?</strong></p>
  
  <p><strong>2. a stateless component can contain another stateful component?</strong></p>
  
  <p><strong>3. a stateful component can contain another stateful compoent?</strong></p>
  
  <p>so anyway ,how to design my components, thanks in advance!!</p>
  
  <pre><code>A(stateful component) -&gt;B (stateless component) -&gt;C (stateless component)
  </code></pre>
  
  <p><strong>both B and C</strong> expect the state from <strong>A</strong> to pass down to them.**</p>