0

我正在尝试使用通常用于网络的内部 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 还是很陌生，所以也许我在这方面完全错了！:)

谢谢

4

1 回答 1

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，不推荐和不赞成，因为它需要猴子补丁。

于 2016-09-28T19:31:16.300 回答