如何向ReactElement添加函数

Question

我试图使用一个内部Javascript库，它通常用于web，其中包含数百万行代码(因此为什么我真的想使用它，而不是改变其中的任何东西:D)与React Native。

这个库中有一些DOM操作是抽象的，我正试图使用React Native使抽象工作。

基本上，我们在web上所做的就是将一个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;

无论如何，这是非常粗糙的，不推荐和不赞成，因为它需要猴子补丁