如何将函数添加到ReactElement

我试图使用通常用于Web的内部Javascript库，其中包含数百万行代码（因此为什么我真的想使用它而不是更改其中的任何内容：D）使用React Native。如何将函数添加到ReactElement

这个库有一些抽象的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() {};

我也乐于接受新观念，我很新的反应/本地做出反应，所以也许我会所有的错这个！ :)

感谢

来源

2016-09-28 Julien Fouilhé

你需要做的是用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;

无论如何，这是非常哈克，不推荐使用并在，因为它需要猴子修补皱起了眉头。

来源

2016-09-28 19:31:16 rclai

是的，但我不能改变库代码不幸的 –

哦，你的意思是你的库只能做'element.append'？ – rclai

是的。：/这就是为什么我想能够传递一个ReactElement，我已经添加了一个append方法。 –

如何将函数添加到ReactElement

回答

相关问题