Причина дублирования элемента из props.children при React.cloneElement(child)?

Question

[KnightForce]

Такая конструкция:
1) Вариант.

renderChildren(props) {

    let child = Children.only(props.children);
    return cloneElement(child, Object.assign({}, props));
  }

  render() {
    return (
      this.renderChildren(this.props)
    );
  }

2) Вариант:

renderChildren(props) {

    let child = Children.only(props.children);
    return cloneElement(child, Object.assign({}, props));
  }

  render() {
    return (
      <div>{this.props.children}</div>
    );
  }

В компонент оборачивается элемент
При 1 варианте выходит:

<ul>
    <li>
        <li></li>
    </li>
</ul>

При 2:

<ul>
    <div>
        <li></li>
    </div>
</ul>

Answer 1

[KnightForce]

Проблема здесь:

return cloneElement(child, Object.assign({}, props));

А именно в Object.assign({}, props)

Так как children находятся в props, а здесь я его пробрасывают в потомка (который по сути и находится в children) - происходит дублирование.

Comments

[Никита Гущин]

Да, вы правы :) Прошу прощения - не внимательно посмотрел