Я все еще новичок в React, и во многих примерах в Интернете я вижу эту вариацию в рендеринге дочерних элементов, которая мне кажется запутанной. Обычно я вижу это:

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

Но тогда я вижу такой пример:

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

Теперь я понимаю API, нодокументы не совсем ясно, когда я должен его использовать.

Так что же делать одному, а другому нет? Может ли кто-нибудь объяснить мне лучшие примеры?