private _renderRecursive()

in libs/core/src/lib/renderer/react-node.ts [275:311]


  private _renderRecursive(key?: string): React.ReactElement<{}> | string {
    const children = this._children
      ? this._children.map((child, index) => child._renderRecursive(index.toString()))
      : [];

    if (this._text) {
      return this._text;
    }

    this._props[CHILDREN_TO_APPEND_PROP] = this._childrenToAppend;

    if (key) {
      this._props['key'] = key;
    }

    // Just having some props on a React element can cause it to
    // behave undesirably, and since the templates are hard-coded to pass
    // all Inputs all the time, they pass `undefined` values too.
    // This ensures these are removed.
    // Additionally, there are some things that Angular templating forbids,
    // and stops at-compile time (with errors), such as `Input`s being prefixed with `on`.
    // Since React does not have the notion of `Output`s as Angular (they are just props of type function, essentially callbacks).
    // To work around this, we, by convention, prefix any PascalCased prop with `on` here, after the template has already been compiled.
    const clearedProps = this._transformProps(removeUndefinedProperties(this._props));

    if (DEBUG) {
      console.warn(
        'ReactNode > renderRecursive > type:',
        this.toString(),
        'props:',
        this._props,
        'children:',
        children
      );
    }
    return React.createElement(this.type, clearedProps, children.length > 0 ? children : undefined);
  }