如何向 ReactElement 添加函数

Question

我正在尝试使用内部 Javascript 库，该库通常用于网络并且包含数百万行代码（因此我真的很想使用它而不是更改其中的任何内容: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 class 但如何告诉 React 使用我的 class 而不是 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;

无论如何，这非常 hacky，不推荐也不赞成，因为它需要 monkey-patching。

如何向 ReactElement 添加函数

How to add functions to ReactElement

reactjs

reactjs-native

react-native