标签: semantic-ui-react

我正在使用Semantic UI React库应用模式。当模式被触发时，它开始闪烁，我一生都无法弄清楚为什么。任何帮助表示赞赏。

在使用 Semantic 之前，我确实安装了 Bootstrap，但当 Semantic 引入该项目时，它被删除了。其他人通过删除 Bootstrap 解决了闪烁问题。但因为我之前已经将其删除并且闪烁仍在继续，所以我不知所措。我确实删除了package-lock.json并运行npm install，但不幸的是并没有解决这个问题。

在我忘记之前，Chrome 和 FF 上确实都会发生闪烁。

以下路径显示了与模式接触的所有文件的布局方式。

index.js
  |_App.js
      |_Router.js
          |_EventPage.js
              |_Jumbotron.js
                  |_QuizModalMike.js

• 注意：这是一个小组项目，并非所有代码都是我编写的。

测验ModalMike.js

我的“多模式”模式的代码是此处找到的示例的副本。即使没有应用任何更改，也会发生闪烁。

import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'

class NestedModal extends Component {
  state = { open: false }

  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })

  render() {
    const …

我正在尝试使用语义用户界面反应动态创建文档列表。我想在单击列表项时取回文档标题。根据文档： https: //react.semantic-ui.com/elements/list

由于这个原因有一个onItemClick道具，但是当我使用它时，我在渲染它时收到警告：

警告：失败的道具类型：道具onItemClick与List道具冲突：children。它们不能一起定义，只能选择其中之一。

另外，单击列表项不会执行任何操作（atm 我只想将文档标题记录到控制台）。这是代码：

handleListItemClick(event, data) {
  console.log("list item clicked: " + data.value);
}


buildResultsContainer() {
    return this.props.listOfResults.map((document,index) =>
      {
        return (
            <List.Item
              as='a'
              key={index}>
                <Icon name='file' />
                <List.Content>
                  <List.Header>{document.properties.title}</List.Header>
                  <List.Description>
                    {document.properties.description}
                  </List.Description>
                </List.Content>
            </List.Item>
      );
      }
    );
  }

  render() {
    return (
      <div>
        <List onItemClick={this.handleListItemClick}>
          {this.buildResultsContainer()}
        </List>
      </div>
    )
  }

您能告诉我如何正确使用 List 组件的 onItemClick 属性吗？

不太重要的是，您对如何重构列表渲染有什么建议吗？只是想让渲染函数保持简短和干净，但是这个函数调用看起来有点矫枉过正......

多谢！

我有我的组件，其中下面的代码ANADB是我的其他组件和SomeComponent是我在哪里呈现A，并B随着TabExampleSecondaryPointing组件。

import { Tab } from 'semantic-ui-react';

const panes = [
  { menuItem: 'A', render: () => <Tab.Pane attached={false}> <A/> </Tab.Pane> },
  { menuItem: 'B', render: () => <Tab.Pane attached={false} > <B/> </Tab.Pane> },
]

const TabExampleSecondaryPointing = () => (
   <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)

class SomeComponent extends Component {
  render() {
      return (
        <div>
           <TabExampleSecondaryPointing />
        </div>
      );
  }
}

我想要做的是当我单击组件内部的某个按钮 …

我希望做这样的事情：

<Divider className="homepage-divider" />

但无论我是否添加类名，都会显示以下内容：

<div class="ui divider"></div>

如何创建自己的 className. 我想多次使用不同宽度的分隔线。我已经知道如何使用覆盖文件自定义它，但这会将我的常规分隔线设置为设定的宽度。

我刚刚购买了 FA-pro，并且我有一种使用它的方法，但没有任何记录。有什么方法可以将 Font Awesome pro 与语义 UI 一起使用吗？（我正在使用 SUI React，但我已经做了一个 Icon 包装器来直接使用 SUI）。

目前我正在奠定我的网页的基础（也是移动优先），我有一个论点。我在我的反应项目中添加了react-semantic-ui。

添加的是我的目标布局。现在我应该用什么来绘制这个，Grid或者Flexbox？我应该避免使用Grid吗？它会减慢渲染速度或降低性能吗？或者我应该使用flexbox最多的地方？或者它应该始终使用Gridor flexbox？或者它可能是两者的组合。请指导我。

提前致谢！

在我的系统中，我有一些用户可以呈现的图像，能够只传递一个 id 然后将该图像呈现给用户对我来说非常有利。

（一个用例：系统中的文章有与之关联的图片，系统中有很多文章，最好只提取图片id并根据该id动态显示图片。没有现实可行的方式，我可以静态地为每篇文章提供一个图像路径。）

不幸的是，我试图弄清楚这一点，但并没有走多远。我会非常感谢“像我 5 岁一样向我解释”这个答案。

我一直在尝试以两种不同的方式使用图像，但不幸的是，这两种方式都不适合我。不幸的是，我将需要两者才能继续:(

1：把它作为一个div的背景。[我将它用作带有重叠文本的轮播。]

2：把它当作一个独立的图像。[这将弥补通过 web 应用程序使用图像的 95% 以上的情况。]

我很想在一个完美的世界中将这样的对象传递给道具。

  articleDetails = {
        articleId: 38387,
        articleTitle: "Magical Unicorn Article"
        articleContent: "I am not that creative, but here is some content."
    }


       <IndividualArticle article={articleDetails}/>

然后让道具接受它并将其转换为我的本地文件的图像路径。

   templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`

然后将此模板字符串用作：

1：一个div的背景图片

    <div
         className="container"
         style={{
             backgroundImage: `url(${templateStringForImage})`         ,                       
             height: "576px"          
    }} 
enter code here

 </div>

2：独立镜像

      <Image
            src={require({templateStringForImage})}
      />

我尝试过的一些事情：

我尝试了一些更改，例如将代码更改为：

     var Background = `../../../images/articleImages/${         
              this.props.article.image     
     }`; 

?

     <div style={{                
             backgroundImage: url('../../../images/articleImages/article3Image.png'),                                
              height: "576px"          
     }} 

但不幸的是，这只给了我这些错误。 …

所以，我正在尝试将语义 UI 模态组件与表单组件一起使用。

我的问题是，如果我将这两个一起使用，UI 会变得很糟糕。

我创建了一个关于我当前情况的沙箱：https : //codesandbox.io/s/2n1pj96ry

正如您现在看到的，提交按钮没有附加到表单上。如果我移动Form直接组件内部Modal组件，这样的： <Modal...> <Form> ... </Form> </Modal> 在提交将附着于形式，但UI breakes下来。

我尝试不同的类添加到这些组件（如ui modal到Form组件，但它不运作良好）。

你有什么建议吗？

谢谢你的帮助！

我正在尝试使用状态来隐藏语义 UI 模型表单，并将 JSON 传递给 Customer 类以添加新客户。我能够传递该值，但最终只有一个值。

当我开始输入名称时，在控制台面板中，第一个字符名称为空“”，第二个字符上有单个“a”

地址内

在创建按钮上单击

当我单击“创建”按钮时，名称为空“”并且地址具有值。

import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';

export default class AddCustomer extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        showCreateForm:false,
        formData:{
            name: '',
            address: ''
        }
    }
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeAddress = this.handleChangeAddress.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChangeName(event) {
    const value = event.target.value;

    console.log(value);

    this.setState({formData:{name:value}});

    //when i go to add input the formData is still empty name is empty.
    //name: ""
    //address: "" …

我在我的 React 应用程序中使用 Typescript 来使用语义 UI 反应，但它给出了错误。该项目使用 PnPify。

TS2604：JSX 元素类型“标头”没有任何构造或调用签名。

我对打字稿很陌生，不知道如何解决这个问题，这是一个组件

import React from 'react'
import Card from '../UI/Card'
import {Header } from 'semantic-ui-react'


const Test: React.FC = () => {

    return (
         <div>
             <Card>
                <Header> Test </Header>
            </Card>
        </div>
    )
}


export default Test

编辑：我复制粘贴了此定义文件的类型，它似乎有效，但我不确定这是正确的方法 https://gist.github.com/tomitrescak/6261ad27dbe43aad03b2497721d751f5