title: Access all children component of a React component
body: <p>I have react component A which renders a table. Data for one of the columns in the table is rendered through another component B, so <code>&lt;B/&gt;</code> is child of <code>&lt;A/&gt;</code>. I want to perform some action on <code>&lt;B/&gt;</code> whenever user clicks anywhere on the page. This click event listener is defined inside <code>A</code>. How can I loop through all <code>&lt;B/&gt;s</code> from inside class <code>A</code>? My component structure is something like this:</p>
  
  <pre><code>class A extends React.Component {
     &lt;B/&gt;
     &lt;B/&gt;
     &lt;B/&gt;
     &lt;B/&gt;
  };
  </code></pre>
  
  <p>I came across <code>React.Children.forEach</code>, but that is useful when children are passed as props via <code>this.props.children</code>; i.e. when the code is something like this:</p>
  
  <pre><code>&lt;A&gt;some markup&lt;/A&gt;
  </code></pre>