在react-ui-bootstrap构建器中添加自定义引导组件

Question

我想在react-ui-builder的可用组件列表中添加一个自定义引导组件 ; 具体我想 能够添加像x-editable widget这样的组件。 它是由react-ui-builder支持的吗？ 这是如何实现的？

我正在研究，以了解我的团队是否可以使用此工具， 因为我没有尝试任何东西（尚未），因此任何指针都会被 赞赏。

Answer 1

启动构建器。首先你必须从画廊克隆项目。其中只有一个带有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尝试组件。并将此组件放在您希望的页面上。