在react-ui-bootstrap構建器中添加自定義引導組件

我想在react-ui-builder的可用組件列表中添加一個自定義引導組件 ; 具體我想能夠添加像x-editable widget這樣的組件。它是由react-ui-builder支持的嗎？這是如何實現的？在react-ui-bootstrap構建器中添加自定義引導組件

我正在研究，以瞭解我的團隊是否可以使用此工具，因爲我沒有嘗試任何東西（尚未），因此任何指針都會被讚賞。

來源

2015-09-06 mguijarr

啓動構建器。首先你必須從畫廊克隆項目。其中只有一個帶有React-Bootstrap組件的項目BootstrapLayouts。

爲我們的項目創建一個空文件夾並將其絕對路徑複製到它。

在圖庫中點擊「克隆」選項並輸入絕對路徑到我們創建的空文件夾。克隆成功的構建器打開了項目的頁面。

只要x-editable是一個jQuery插件，你必須爲它創建一個React組件包裝器才能在構建器中使用它。

將HTML錨點組件放到其他地方的頁面上。然後在「增強」組中生成一個包裝器的源代碼，並將其命名爲「XEditableText」.Webpack將編譯新組件並將出現在組件列表中。

轉到源代碼並檢查是否有新文件組件。

現在是時候爲包括x編輯插件安裝到項目的源代碼。

你要下載X-editble插件的分配。在這裏你只需要爲引導版本3.複製這個文件夾到一個分配我們的項目在新文件夾中src/libs，但您可以創建任何摺疊你希望在項目的根文件夾中。

X編輯需要引導的jQuery插件一樣，所以你需要下載bootstrap.js文件，並將其複製到的src /資產/ JS文件夾。

然後去建設者「.builder」的元信息的文件夾，然後打開它。查找src文件夾index.js文件，這是建築工地的WebPack的切入點，你必須包括要求（）條目X編輯插件提供相對路徑它的源代碼文件，輸入需要bootstrap.js（）項以及。

現在，您需要修改組件的源代碼。你必須使用jQuery插件組件被安裝到DOM後，所以才改寫法「componentDidMount」添加

componentDidMount: function(){ 
    $(React.findDOMNode(this.refs.editableElement)).editable(); 
}

也有關於x編輯，我們必須也添加到組件的標籤（添加一些額外的屬性他們在渲染方法中）：

render: function() { 
    return (
     <a href="#" 
      ref="editableElement" 
      id="username" 
      data-type="text" 
      data-pk="1" 
      data-title="Enter username">User Name</a> 
    ); 
}

最後，您可以在實時預覽模式下在頁面上看到ant嘗試組件。並將此組件放在您希望的頁面上。

來源

2015-09-11 15:17:49

在react-ui-bootstrap構建器中添加自定義引導組件

回答

相關問題