标签: semantic-ui-react

我正在尝试获得一个语义ui(react)菜单列表,它应该与react路由器一起工作,这意味着我想使用Link组件react router

如果我用这个......

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

......它给了我结果:

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

但我想得到类似的东西

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

这个不起作用,因为语法错误:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>

我使用此代码从顶部边缘我的按钮：

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

每当我使用MarginButton节点时，我都会收到此错误：Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

你可以在这里看到这个制作。

我该怎么办？

我正在使用官方的Semantic UI React组件来创建Web应用程序.我的注册页面上有一个表单,其中包含电子邮件字段,密码字段和确认密码字段.

import {Component} from 'react';
import {Button, Form, Message} from 'semantic-ui-react';
import {signUp} from '../../actions/auth';

class SignUp extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e, {formData}) {
        e.preventDefault();

        //
        // Potentially need to manually validate fields here?
        //

        // Send a POST request to the server with the formData
        this.props.dispatch(signUp(formData)).then(({isAuthenticated}) => {
            if (isAuthenticated) {
                // Redirect to the home page if the user is authenticated
                this.props.router.push('/');
            }
        }
    }
    render() {
        const …

as被定义为An element type to render as (string or function).语义-UI-react中的大多数组件.那是什么意思？

我的理解是它以某种方式改变了组件as.

例:

https://react.semantic-ui.com/modules/sidebar 已经Sidebar as={Menu}那么孩子们<Menu.Item name='...'>不典型<Menu/>时所需的开始菜单.

我正在使用 React、Next.Js、semantic-ui-react 和 Solidity。我的目标是打印出用户地址（来自 MetaMask）和一个 ProjectTitle（由用户设置）作为语义 ui-react 卡片的元信息。打印“标题”中的地址是有效的，但我无法将 ProjectTitle 打印为“元”。标题应该是一个字符串，但我收到了一个对象承诺。

static async getInitialProps() {
    const projects = await factory.methods.getDeployedProjects().call();
    return {
        projects
    };
}

async getProjectTitle(address) {
    let title;
    try {
        title = await factory.methods.projectTitle(address).call();
    } catch (err) {
        console.log('err');
    }
    return title;
}

renderProjects() {
    const items = this.props.projects.map(address => {
        return {
            header: address,
            color: 'green',
            description: (
                <Link route={`/projects/${address}`}>
                    <a>View Project</a>
                </Link>
            ),
            **meta: this.getProjectTitle(address)**,
            fluid: true,
            style: { overflowWrap: 'break-word' }
        };
    }, );
    return <Card.Group …

我正在使用语义 UI React并尝试找到覆盖默认样式的最佳方法，以便我可以更改卡片的外观和整体主题。

选项 1 似乎是定义我的 CSS 并在每条规则之后放置 !important，这不太好。

Option 2 is the theming support, which sounds like what I want, except I cannot determine how to get started with that. My app is using CRA, and I'm a bit lost in documentation between changing my webpack configuration file (I don't have one), out of date blog posts from 2017 advising me to install a bunch of modules whose purpose is unclear, and the theming site itself which …

我通过运行创建了一个新的 React 应用程序，npx create-react-app@latest --typescript .并使用运行了该项目npm start，一切都按预期工作。我运行npm install semantic-ui-react semantic-ui-css并安装正确。

但是当我按照指示添加时import 'semantic-ui-css/semantic.min.css';，index.tsx我得到一个failed to compile error.

这是我的index.tsx文件：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or …

如何在语义 ui-react 中禁用带有凭据的自动完成表单？试过这个，但它不起作用

import { Form } from 'semantic-ui-react';
<Form autoComplete="off">
....
</Form>

我正在尝试测试反应组件并使用expect(elm).not.toBeVisible()但没有成功。

更新 3

我已将代码缩减为这种更简单的形式：

// ./TestItem.js
import React from 'react'
import './TestItem.css'

export default ({ hide }) => {
  return <div className={hide ? 'shouldHide' : ''}>Text</div>
}

// ./__tests__/TestItem.test.js
import React from 'react'
import { render } from 'react-testing-library'
import TestItem from '../TestItem'
import 'jest-dom/extend-expect'
import 'react-testing-library/cleanup-after-each'


test.only('TestItem should render correctly', async () => {
  const { getByText, debug } = render(<TestItem hide={true} />)
  const itemNode = getByText('Text')
  debug()
  expect(itemNode).not.toBeVisible()
})

// ./TestItem.css
.shouldHide {
  display: none;
} …

我一直在阅读 nextjs 文档，它在这里说：

\n

如果 的子组件Link是函数组件，除了使用\n 之外passHref，还必须将该组件包装在 中React.forwardRef：

\n

我是使用 Semantic UI React 的新手，所以我不确定是否需要这样做，更重要的是如何做到这一点。我对此感到担忧，因为就在上面引用的行之前，文档在这里说：

\n

如果没有这个（passHref），标签将没有 href 属性，这可能会损害您的网站\xe2\x80\x99s SEO。

\n

passHref我可以这样传递：

<Link href=\'/posts\' passHref>\n  <Button>See Posts</Button>\n</Link>\n

但问题是我不认为我们可以用 Semantic UI 包装组件，因为React.forwardRef它是刚刚导入的。所以我的问题是：

\n
• 就这样就可以了吗？
\n
• 或者是否有解决方法可以“不损害”我网站的搜索引擎优化？
\n