Компоненты высшего порядка способ вернуть props.children из render?

Question

[KnightForce]

Решил написать небольшую библиотеку.
Написал компонент, который берет одного потомка, пробрасывает ему в props данные и должен вернуть этого потомка:

let props = this.props;
let child = Children.only(props.children);
return cloneElement(child, Object.assign({}, props, {data: "Данные"}));

render:

render() {
    let El = this.renderChildren(this.props);
    return (
      <El />
    );
  }

Но выдает ошибку:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `MyComponent`.

Как лучше реализовать такой подход?

Answer 1

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

return (
   <El />
)

Это верно, если El - компонент. А у вас El - это реакт элемент (инстанс компонента). Так что просто возвращайте его:

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

Comments

[KnightForce]

Никита Гущин , не по теме вопрос, но:
1) Насколько я знаю {} позволяет вставлять код.
Т.е.: чтобы отобразить массив компонентов, например: [<span/>,<span/>] - подойдут фигурные скобки. А если один элемент - то фигурные скобки не используются, а можно напрямую?

2) Если так, то скобки нужны:

let El = <p/>
return (<div>{El}</div>);

3) А если нужно вернуть просто элемент, то можно без них?
return El;

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

KnightForce: да, только массив вы не можете вернуть из метода render() в текущей версии реакта.