Question

我想在列表中添加自定义引导程序组件 react-ui-builder中的可用组件; 特别是我想能够添加x-editable widget之类的组件。它是由react-ui-builder支持的吗？如何实现这一目标？

我正在研究，以了解我的团队是否能够使用此工具，目前我还没有尝试任何东西，所以任何指针都是如此赞赏。

Answer 1

启动构建器。首先，您必须从库中克隆项目。它内部只有一个带有React-Bootstrap组件的BootstrapLayouts项目。

为我们的项目创建空文件夹，并将绝对路径复制到它。

在图库中点击“克隆”选项，然后在我们创建的空文件夹中输入绝对路径。克隆成功构建器后打开了项目的页面。

至于x-editable是一个jQuery插件，你必须为它创建一个React组件包装器，以便在构建器中使用它。

将HTML锚点组件放在其他位置的页面上。然后在“Enhanced”组中生成一个包装器的源代码，并将其命名为“XEditableText”.Webpack将编译新组件，它将出现在组件列表中。

转到源代码并检查组件是否有新文件。

是时候将x-editable插件包含在项目源代码中了。

您必须下载x-editble插件的分发版。这里只需要一个Bootstrap版本3的发行版。将此文件夹复制到新文件夹 src / libs 中的项目，但是你可以在项目的根目录中创建任何你想要的文件夹夹。

X-editable也需要Bootstrap jQuery插件，因此您需要下载 bootstrap.js 文件并将其复制到 src / assets / js 文件夹。

然后转到构建器“.builder”的metainfo文件夹，然后打开它。在src文件夹中找到index.js文件。这是构建器webpack的入口点，你必须包含x的require（）条目 - 可编辑插件，提供其源代码文件的相对路径。输入 bootstrap.js 的require（）条目。

现在您需要修改组件的源代码。组件安装到DOM后必须使用jQuery插件，所以只需重写方法“componentDidMount”add

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

还有一些x-editable的附加属性，我们必须添加到组件的标签（在render方法中添加它们）：

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

最后，您可以在实时预览模式下查看页面上的ant try组件。并将此组件放在页面上您希望的位置。

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

1 个答案: