Ich bin immer noch ein Neuling bei React und in vielen Beispielen im Internet sehe ich diese Variation darin, untergeordnete Elemente zu rendern, was ich verwirrend finde. Normalerweise sehe ich das:

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

Aber dann sehe ich ein Beispiel wie dieses:

<ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

etzt verstehe ich die API, aber die docs nicht genau klar machen, wann ich es verwenden soll.

So was macht einer was der andere nicht kann? Könnte mir das jemand mit besseren Beispielen erklären?