问题标签 [semantic-ui-react]

我编写了要在其他站点上实现的 javascript 代码。它就像为用户目的而打开的小型模式窗口。在开发它时，我正在使用语义 ui 样式表。但现在我明白了，如果用户想把这个窗口添加到他的网站，他也应该添加样式，让它看起来像是开发和设计的。但是样式是全局的，我的意思是语义样式。并且有两种可能的情况。用户添加了语义样式并且站点已损坏，或者用户未使用语义样式然后我的窗口已损坏。我解决这个问题的最佳方法是什么。如何仅将语义样式附加到我的窗口？

我目前正在使用 React 中的语义 UI 在我的 AppBar 上实现侧边栏。到目前为止，我已经解决了这个问题：

} }

所以我得到的问题相对简单，侧边栏没有显示。虽然它在那里，你可以通过浏览器开发者面板中的元素浏览器看到它，但它不会显示。

我检查了我正在使用的状态变量，并且它们的值设置正确。当单击侧边栏的图标按钮时，visible 设置为 true，因此变暗并相应地关闭它们。

我怀疑问题必须来自设置属性（例如：dimmed = {this.state.dimming}或来自侧边栏本身，它定位不正确？元素本身不会出现在屏幕上，尽管我可以在元素列表中找到它：

脚本的渲染部分在其他地方，但效果很好，所以我认为没有必要在此处包含它。

任何帮助将非常感激！！

如何使用语义 UI 反应图像组件显示图像？我注意到非反应版本说它支持 svg，img但反应版本没有说明它是否支持。我正在做的是

但是，我只看到一个损坏的图像图标。Webpack 编译正确，所以路径没有错。有人可以让我知道解决我的问题的最佳方法是什么吗？

我目前正在做一个项目，我需要配置WebPack。在项目中，我们还使用了 ReactJS和Semantic-UI。这是webpack.config.js：

在assets/js/index.jsx文件中，我们只有这些导入语句：

通过运行 webpack 命令，它会输出两个文件：

1. react.js：779 KB
2. 主页-[some_hash_number].js：1.5 MB

使用webpack-bundle-analyzer插件，我们得到：

正如您在图片中看到的红色矩形，所有语义 UI反应组件都捆绑到home.js文件中，尽管我只是从assets/js/index.jsButton文件中导入组件，这就是输出文件变得太大的原因。

有什么方法可以捆绑所需的组件吗？

更新

阅读@Alexander Fedyashov 的答案，我安装了babel-plugin-lodash并相应地更新了 webpack.config.js：

现在一切正常，只加载了需要的组件。

我正在使用此页面中的示例，以及从道具加载的卡片组示例。我的道具是硬编码的，如下所示：

并声明我的卡组，如示例所示：

结果是：

如果我以声明方式对卡进行硬编码，我可以使用 import 语句加载图像，但不是绝对路径？：

导致：

这让我想到了三个问题：

1）为什么当我尝试通过道具加载图像时格式会改变？（灰色标题部分）

2) 为什么图片不能通过道具加载？

3）为什么当图像被硬编码时，它不会以与导入语句中提供的图像相同的路径呈现，该路径是否有效？

我已经对此进行了一段时间的研究，并遵循了以下位置的文档：

github 上的这个问题让我看到了关于 Augmentation 的语义 ui-react 文档，

以及关于使用 sub-routes 设置路由配置的 react-router 文档。

我的路由配置似乎可行，但不清楚具体在哪里实现组件增强。

我已经尝试过<Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} />，也尝试过将其放入as={Link}道具本身，并且遇到了一堆错误并最终导致了可怕的递归失败Maximum call stack size exceeded!

现在，我只是用 react-router 硬编码组件的路径。一种功能性的方法会更优雅，反应更强烈，这就是我所追求的！

这可能有点疯狂和边缘情况，但如果我能让它工作，那就太好了。我使用 semantic-ui-react 作为组件库，但使用 redux-form 进行表单提交和验证。到目前为止，一起工作，虽然有点混乱，但很好。

目前，我正在尝试将语义 UI 反应组件与此处<Input />链接的组件一起使用。这是下拉列表附加到类似相关输入选项的输入的位置。尝试混合 redux-form 时会发生疯狂的事情。<Dropdown />

出于可重用性的目的，我已将输入的呈现移动到单独的方法中，所以这是我呈现下拉列表的方法：

这对于 a<Dropdown />及其 props 的语义 ui-react 代码都是正常的。

我从 redux-form<Field />组件调用该方法，如下所示：

因此，semantic-ui-react<Dropdown />被渲染为组件的 redux-form 字段的action组件<Input />- 嘴巴满了，是的，有点令人困惑，但它有点工作。上面的代码正如我所期望的那样工作，我可以在 redux-form 的 reducer 中获取字段的值（对于那个表单），但是css 都被抬高了。它看起来像这样：

在 redux 商店中：

因此，除了输入字段的 css 没有对齐之外，这一切都按照我的意愿工作。<Dropdown />烦人的部分是我可以将语义 UI 反应中的常规组件传递到action={ }第一个输入的道具中，尽管我无法访问下拉列表中的选择，但它看起来更好。代码如下所示：

它呈现如下：

所以底线是我希望它看起来像这样（上图），但像原始代码片段一样工作。如果我采用最后一种方式，我将无法访问 redux-form 保存操作员（下拉菜单）值的能力，但看起来我想要最终结果。

我正在尝试使用语义模态让模态在反应中关闭。出于某种原因，我可以关闭表单，但调光器仍然存在。我需要帮助。

我已经尝试过 $('.ui.modal').modal('hide dimmer') 和许多其他的东西。

模态在这里：

表格在这里：

我想知道在语义-ui-react 中是否可以使用相同的技术？在隐藏可选列的情况下，我希望主内容网格列全宽。

我正在尝试从语义-ui-react 库中实现这个基本模式，并希望在单击按钮时显示这个模式。下面是代码：

我将这个组件导入到另一个 jsx 文件中，我想在其中使用它，但只显示按钮并且它没有任何功能：