问题标签 [semantic-ui-react]

我正在使用webpack构建一个ReactJS应用程序。

这个简单的例子应该将一个<img>给定的 url 渲染为src-attribute。

如何将图像资源与 webpack 捆绑并通过适当的加载器进行处理？我想不通，为什么图像资源没有被捆绑。

我不包括admin.bundle.js像这样生成的<script src="/admin/dist/admin.bundle.js"></script>，因为我不是在谈论prod环境。我只是在使用webpack-dev-server --inline --hot，所以我包括admin.bundle.js这样的： <script src="http://localhost:8080/admin/dist/admin.bundle.js"></script>它完全有效。

我的（Symfony 和 ReactJS）项目的目录结构如下（我省略了不相关的目录/文件来澄清）：

我的 webpack.config.js 如下：

我正在尝试将语义 UI 中的选项卡实现到我的 Next.js 应用程序中。

我收到此错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查TabExampleBasic.

这是代码：

我将此组件导入 pages/index.js。来自语义用户界面的其他组件，如 Card、Grid 或 Accordion，可以毫不费力地工作。

我正在处理这个例子：https ://github.com/zeit/next.js/tree/master/examples/with-semantic-ui

我想在我的dropdown. 下面的代码在我添加选定选项但不使用默认选定选项呈现时有效：

我尝试添加defaultSelectedLabel={this.state.selected}.

this.state.selected是一个选项数组，其默认选择值为 true ：

但我收到以下警告：

Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.

我对defaultValueprop 做了同样的事情，但得到了同样的错误

如何在我的dropdown?

假设我的应用中有这个：

每当切换选项卡时，它都会从头开始重新加载，并且如果我返回到它，我将丢失切换到的选项卡内的所有更改。

是什么导致了这种情况以及如何保持切换的选项卡的更改内容？

标签文档：https ://react.semantic-ui.com/modules/tab#tab-example-basic

我目前正在构建我的第一个 React 应用程序的管理端，该应用程序是从create-react-app开始的（如果在这种情况下很重要，也可以使用 styled-components）。

我没有构建自己的自定义管理员，而是使用Semantic UI React。其中一部分涉及导入样式：

import 'semantic-ui-css/semantic.min.css';

我在我的管理容器组件中执行此操作。我遇到的问题是，一旦我导入这些样式，全局选择器就会在站点范围内应用，即使我只希望它们在管理方面。

是否有将导入样式限制在应用程序给定区域的标准做法？我对这个很陌生。

我正在尝试使用可见性组件在我的 Semantic UI React 应用程序上进行无限滚动。

我一直在 Semantic UI React 页面上关注这个例子：https ://react.semantic-ui.com/behaviors/visibility#callback-frequency-example 。我已将代码简化如下：

在我的简单 React App 中，没有任何console.log语句被触发。但是，当我在 Semantic UI React 网页上操作代码时，console.log语句会按预期触发。

我错过了什么？

编辑：这是我在index.js文件中呈现 VisibilityExample 组件的位置：

我的用例类似于我在下面的示例中简化的内容。如何渲染共享相同触发器的组件？

我使用 Semantic-UI-React 在 React 中构建了一个简单的 add-your-todos 系统。它目前看起来像这样：

问题描述和我的尝试

当用户单击红色 bin 图标时，我想使用 Fadeout Transition 删除 Table.Row。它当前会删除该行，但此处的动画将使用户体验更加愉快。我访问了文档并尝试使用 Transition.Group 组件来实施解决方案。

……但效果不好

在尝试自己解决这个问题后，我得到了一些意想不到的行为。首先，行不会淡出。此外，所有 Table.Cell 都“混合”到一个单元格中，这很烦人。看到（可怕的）结果：

Todo 组件（之前）

每个 Todo 行都使用 Todo 组件动态添加到 Table 上，在实现 Transition.Group 之前，该组件看起来像这样：

组件（后）

这就是它现在的样子（这显然是错误的！）：

提供的任何帮助将不胜感激！

编辑

@Adrien 的回答部分解决了我的问题。现在每个单元格都在其位置，但动画过渡似乎没有播放。此外，我的“已完成”复选框（检查应用程序的初始、未修改版本）旁边的日历图标似乎消失了。知道为什么会发生这两件事吗？看：

我有这个来自 Semantic-UI 和 React 的图标

<Icon name={`idea ${words}`} /> 其中单词可以是基于用户输入的任何单词字符串。有没有办法让这个不出错？我现在遇到这样的错误

看起来它只需要一个单词，但我希望它能够使用多个单词。

有没有办法在图标加载时显示奖杯图标，但是当人们在 Semantic-UI 的库中输入与图标匹配的单词时，它会切换到那个？当他们删除那个词时，它应该回到奖杯图标。

谢谢！

Semantic-UI 有这个 React 组件，我正在使用的Segment 。

在我的应用程序中，我将 onMouseOver 与 Segment 一起使用，如下所示：

我想要 handleHover() 做的是在鼠标悬停事件上动态地将语义 UI 道具添加到 Segment。我尝试使用react clone element执行此操作，并根据 Semantic UI 文档添加新的颜色道具

反应文档状态：

使用 element 作为起点克隆并返回一个新的 React 元素。结果元素将具有原始元素的道具和新道具的浅层合并。

因此，即使在克隆了 React 组件之后，当我将鼠标悬停在 Segment 上时，它仍然不会显示新的颜色属性。

问题：这是动态添加道具的正确方法吗？如果是这样，那么为什么不显示新添加的颜色。如果没有，那么我应该如何更改我的代码？