如何將函數添加到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

回答

相關問題