Question

我是React的新手。我试图将链接添加到React语义UI下拉菜单。以下是我从React语义UI中获取的组件

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const trigger = (
  <span style={{ marginTop: "2px" }}>
    <i aria-hidden="true" class="user big icon" size="big" />
  </span>
);
const options = [
  { key: "user", text: "Account", icon: "user", to: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", to: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", to: "/sign-out" }
];

const DropdownMenu = () => (
  <Dropdown
    trigger={trigger}
    options={options}
    pointing="top right"
    icon={null}
  />
);

export default DropdownMenu;

我尝试将“ to”关键字添加到options数组，并已将Route路径添加到位于另一个组件中的Router上，但是它不起作用。任何帮助将不胜感激，谢谢。

Answer 1

您可以尝试类似的方法。在选项数组中将键从更改为到 value 。然后使用ggplot(df, aes(x = t, y = y)) + geom_line(aes(group = particle, color = particle))方法处理选择。您可能希望将历史记录道具从父组件传递到要调用该操作的组件（如果该组件不可用）。

onChange

Answer 2

我的解决方案基于Jan Fara的回答：

import React from 'react';
import { Dropdown } from 'semantic-ui-react';
import Avatar from 'react-avatar';
import { Link } from 'react-router-dom';

function DropdownuserMenu() {
  const trigger = (
    <span>
      <Avatar name='Happy User' size="40"/>
    </span>
  );
  return (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
      <Dropdown.Menu>
        <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
        <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
        <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
      </Dropdown.Menu>
    </Dropdown>
  );
}
export default DropdownuserMenu;

Answer 3

或者您可以使用 Dropdown.Menu 和 Dropdown.Item 。每个Dropdown.Item可以具有参数as={Link} to='/somewhere'/。

import React from "react";
import { Dropdown } from "semantic-ui-react";
import { Link } from "react-router-dom";

const trigger = (
    <span style={{ marginTop: "2px" }}>
        <i aria-hidden="true" class="user big icon" size="big" />
    </span>
);

const DropdownMenu = () => (
    <Dropdown trigger={trigger} pointing='top left' icon={null}>
        <Dropdown.Menu>
            <Dropdown.Item text='Account' icon='user' as={Link} to='/accounts'/>
            <Dropdown.Item text='Settings' icon='settings' as={Link} to='/settings'/>
            <Dropdown.Item text='Sign Out' icon='sign out' as={Link} to='/sign-out'/>
        </Dropdown.Menu>
    </Dropdown>
);

export default DropdownMenu;

希望它能对您有所帮助。

如何链接或路由React语义UI下拉组件

3 个答案: