Как добавить функции в ReactElement

Question

Я пытаюсь использовать внутреннюю библиотеку Javascript, которая обычно используется для Интернета и которая содержит миллионы строк кода (поэтому я действительно хотел бы использовать ее, а не что-либо менять в ней:D) с React Native.

В этой библиотеке есть некоторые манипуляции с DOM, которые являются абстрагированными, и я пытаюсь заставить абстракцию работать с использованием React Native.

По сути, в Интернете мы передаем HTML-элемент в библиотеку, а библиотека заполняет его другими элементами. Позже, эта библиотека может удалять элементы из дерева или добавлять некоторые, в зависимости от того, что мы говорим, чтобы сделать. Поэтому я хотел бы иметь возможность передать эту библиотеку ReactElement, чтобы React Native автоматически обрабатывал чертежную часть.

Вот что делает библиотека, очень очень упрощенно:

function libraryCode(element) {
    element.append(otherElement);
}
var element = document.createElementNS('div');
libraryCode(element);
return element;

И вот что я хотел бы сделать:

render() {
    var element = React.createElement(Element);
    libraryCode(element);
    return element;
}

Но ReactElement не имеет append функция. Поэтому мне было интересно, есть ли способ добавить функции в ReactElement? Это позволило бы мне создать функцию с именем append, которая добавила бы дочерний элемент и повторно отобразила элемент. Я пытался, и это только для чтения, очевидно. Я хотел расширить класс ReactElement, но как сказать React использовать мой класс вместо ReactElement?

var elem = React.createElement(Element);
elem.append = function() {};

Я также открыт для новых идей, я совершенно новичок в React/React Native, так что, возможно, я ошибаюсь с этим!:)

Спасибо

Answer 1

Что вам нужно сделать, это использовать React.cloneElement и затем сделайте свое прибавление, передав детей. Это должно позволить вам сделать:

function libraryCode(element, otherElement) {
  return React.cloneElement(element, null, [otherElement]);
}

РЕДАКТИРОВАТЬ

Самое близкое, что я получил, чтобы заставить его работать, но не соответствовал вашим потребностям, это:

var oldCreateElement = React.createElement;
React.createElement = function(...args) {
  let element = Object.assign({}, oldCreateElement(...args));
  element.append = (otherElement) => {
    // Unfortunately you simply can't replace the
    // reference of `element` by the result of this operation
    return React.cloneElement(element, null, [
      React.cloneElement(otherElement, {
        // You must give a `key` or React will give you a warning
        key: Math.random(),
      }),
    ]);
  };
  return element;
};

Это только позволит вам сделать:

var element = React.createElement(Element);
element = element.append(<Text>Hi</Text>);
return element;

Но нет:

var element = React.createElement(Element);
element.append(<Text>Hi</Text>);
return element;

В любом случае, это очень неприлично и НЕ рекомендуется и не одобряется, потому что это требует исправления обезьян.