1

我正在学习 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',
  //     value: 'Jenny Hess',
  //     image: { avatar: true, src: '/assets/images/avatar/small/jenny.jpg' },
  //   },
//  ...
// ]


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

export default DropdownExampleSelection
4

1 回答 1

7

可能是因为你没有安装相应的 CSS 包。根据文档的使用页面：

Semantic UI CSS 可以使用 NPM 作为包安装在您的项目中。您将无法通过此方法使用自定义主题。

$ npm install semantic-ui-css --save

安装后，您需要在index.js文件中包含缩小的 CSS文件：

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

CSS 位于一个单独的包中，JavaScript 和 React 组件就像在主包中一样。您必须安装并导入 CSS 包和文件才能将 CSS 应用到您的组件。

于 2017-07-02T04:22:19.070 回答