javascript - ReactJS, find elements by classname in a React Component

Question

I've a React component. Some elements will be inserted through the children. Some of these elements will have a specific classname. How can I get a list of these DOM nodes in my outermost Component?

<MyComponent>
  <div classname="snap"/>
  <p></p>
  <div classname="snap"/>
  <p></p>
  <div classname="snap"/>
</MyComponent>

What I want to know is how many elements with the classname "snap" are inserted in my component.

Answer 1

You can achieve it, via findDOMNode of react-dom, like below:

ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap') // Returns the elements

If you need the count,

ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap').length