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;

无论如何，这是非常hacky，不推荐和不赞成，因为它需要猴子修补。

如何将函数添加到ReactElement

1 个答案: