标签: semantic-ui-react

我是 React 新手，正在尝试利用 Semantic-ui-react。我按照安装React和Semantic UI React 的说明进行操作，但每次尝试从 Semantic-ui-react 添加任何元素时，都会在开发控制台/浏览器中收到以下错误（请参阅详细屏幕截图的链接，并在下面引用）：

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件。

检查 的渲染方法App。

页面错误信息截图

控制台中的错误消息的屏幕截图

当我console.log导入 Semantic-ui-react 元素之一时，它返回未定义。

删除 Semantic-ui-react 元素，但保留 JSX 可以解决该错误。我尝试重新安装 React 和 Semantic UI React，仔细检查我的导入/导出，并仔细检查我的语法，但我找不到问题。

回购： https: //github.com/LATAEVIA/SS-Artistpage

包.json

  "dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-scripts": "1.0.17"
"react-scripts": "1.0.17",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.76.0"

索引.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import 'semantic-ui-css/semantic.min.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App …

我正在学习反应。对于CSS，我使用semantic-ui-react。我正在尝试使用文档创建一个选项卡：https://react.semantic-ui.com/modules/tab。我明白它是如何工作的，现在我想根据用户要求生成动态选项卡。假设我有一个这样的对象：

[{name: "10jan", key: "10jan"}, 
 {name: "12jan", key: "12jan"},
 {name: "14jan", key: "14jan"}]

我想基于此生成动态选项卡。我的代码是这样的

const panes = [
    { dates.map((date) => (
        return (
          menuItem:{date.name},
          render(){
            <div>Test</div>
          }
        )
      ) }
    ]

我哪里做错了？

我想我遵循了其他人所说的设置“语义用户界面反应”的所有步骤，但有一个错误。

./assets/components/UserPage/UserPageQuestion/UserPageQuestion.js 模块中的错误未找到：错误：无法解析“C:\Users\1Sun\Cebula3\cebula_react\assets\components\UserPage”中的“semantic-ui-react” \UserPageQuestion'@./assets/components/UserPage/UserPageQuestion/UserPageQuestion.js 31:0-67 91:63-70 91:98-104 93:29-35 93:76-81 95:31-38 95:66 -72 98:29-35 100:42-47 @ ./assets/components/UserPage/index.js @ ./assets/components/UserPage/UserPage.js @ multi ./assets/components/UserPage/UserPage.js

包.json

...

"dependencies": {
    ...
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.4",
    ...
  }

...

UserPageQuestion.js

import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'

import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.js';
import '../../../../../static/cebula/Semantic-UI-CSS-master/semantic.min.css';

const UserPageQuestion = () => {
     return (
          <Segment>
                 <Dimmer active>
                       <Loader>Loading</Loader>
                 </Dimmer>
                 <Image src='/images/wireframe/short-paragraph.png' />
          </Segment>
     )

}

有什么问题？？

我正在尝试实现一个可搜索的下拉列表（使用 Semantic UI React 库），该下拉列表由来自服务器的匹配结果填充。用户会看到一个输入框。一旦他们开始输入几个字符，就会向后端 restful 端点发出请求，该端点返回匹配的搜索结果。这些结果在下拉列表中显示为值。

这对于普通的语义 UI 来说很容易（在https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server 中解释）。

但是如何使用库的 React 版本来实现这一点？

我无法从文档（https://react.semantic-ui.com/modules/dropdown/#usage-remote）中弄清楚。

有人可以为我提供一个例子吗？

我曾经create-react-app初始化我的应用程序。然后我npm install semantic-ui-react --save安装了这个包。

我想Grid从https://react.semantic-ui.com/collections/grid#grid-example-divided-number创建这个例子：

我创建了一个名为Grid.js：

import React from 'react'
import { Grid } from 'semantic-ui-react'

const GridExample = () => (
  <Grid columns={3} divided>
    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExample

然后在App.js我导入GridExample：

import React, { Component } from 'react'; …

我正在学习React，大约要花一个星期的时间。我想构建一个下拉列表并学习React Semantic UI，我认为我可以从此处复制其网站的代码开始。即使尽可能直接复制代码，我也无法正确显示。有人可以解释一下让我看起来错误的区别是什么吗？

我的代码：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

var options = [
    {
      text: 'Jenny Hess',
      value: 'Jenny Hess',
    },
    {
      text: 'ME',
          value: 'ME',
    }
]

const Reorder = () => (
  <Dropdown placeholder='Select Friend' fluid selection options={options} />
)

export default Reorder

文档中的代码示例：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

import { friendOptions } from '../common'
  // friendOptions = [
  //   {
  //     text: 'Jenny Hess',
  // …

我正在开发一个React应用程序，最近我开始使用语义ui react模块。

不幸的是，我无法使Tab对象响应...

一个非常简单的脚本可以显示以下内容：

import React from 'react'
import { withRouter } from 'react-router-dom'

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

// import NavSection from './NavSection'

var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]

const NavigatorHeader = () => (
<div>
  <h1>Navigator</h1>
  <div>
    <Tab menu={{ pointing: true }} panes={getPanes(sections)} />
  </div>
</div>
)

export default withRouter(NavigatorHeader)


function getPanes(sections){
  return sections.map( function(section){
    return {
      menuItem: section,
      render: () =>
        <Tab.Pane attacched="false">
          <div>
            <p>
            Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
            </p> …

我不确定为什么，但是当我尝试为图标设置中等大小（通过在className中传递“ medium”和其他参数）时，我得到了“ unknown symbol”符号。我将语义与react结合使用。碰巧出现在任何图标上。

我用：

反应：16.6.3，语义UI-CSS：2.4.1，语义UI-反应：0.83.0

我正在使用 Next.js 并想添加react-semantic-ui，以使用他们的登录组件之一。

在前端，我收到此错误：无法编译

./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

这是登录组件：

import React from 'react'
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'

const Login = () => (
  /* login JSX markup */
)

export default Login

这是我的 next.config.js

  module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: …

考虑以下示例：

import React, { Component } from 'react'
import { Form } from 'semantic-ui-react'

class FormExample extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleSubmit = () => this.setState({ email: '', name: '' })

  render() {
    const { name, email } = this.state

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Group>
          <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
          <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
          <Form.Button attached='bottom' content='Submit' />
        </Form.Group>
      </Form>
    )
  }
}

如果 …

使用multiselectwith时出现此错误final-form。

设置value时下拉菜单必须是一个数组multiple。接收类型：[object String]

这是我的代码：

https://codesandbox.io/s/cool-torvalds-lhe9d

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />

任何更新？

我试图让调光器仅在点击ETH或Select a token按钮点击时显示。我什至无法让状态部分工作，所以我可以连接按钮。

function Main () {
  const [accountAddress, setAccountAddress] = useState(null);
  const [show, setShow] = useState(false);

return (
    <div ref={contextRef}>
      <Dimmer.Dimmable as={Segment} dimmed={show}>
          <Grid style={styles.grid}>
            <Grid.Row>
              <Grid.Column>
                <Card style={styles.card} centered>
                  <Card.Content>
                    <Card.Header style={styles.padding}>Swap / Pool</Card.Header>
                      <Input style={styles.padding} fluid type='text' placeholder='0.0'>
                        <Label basic>From</Label>
                        <input />
                        <Button>ETH <Icon name='angle down' /></Button>
                      </Input>
                      <Input style={styles.padding} fluid type='text' placeholder='0.0'>
                        <Label basic>To</Label>
                        <input />
                        <Button>Select a Token <Icon name='angle down' /></Button>
                      </Input>
                      <Button style={styles.padding} color='teal' fluid size='large'>
                        Connect Wallet
                      </Button> …