如何链接或路由反应语义 UI 下拉组件答案

【问题标题】：How to link or route the react semantic UI dropdown component如何链接或路由反应语义 UI 下拉组件
【发布时间】：2019-03-13 12:31:54
【问题描述】：

我是 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”关键字添加到选项数组，并将路由路径添加到位于不同组件中的路由器，但它不起作用。任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

或者您可以使用 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;

希望对你有帮助。

【讨论】：

【解决方案2】：

你可以试试这样的。将选项数组中的 to 键更改为 value。然后使用onChange 方法来处理选择。如果该组件不可用，您可能希望将 history 属性从父组件传递到要调用该操作的组件。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Dropdown, Form } from "semantic-ui-react";

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", value: "/accounts" },
  { key: "settings", text: "Settings", icon: "settings", value: "/settings" },
  { key: "sign-out", text: "Sign Out", icon: "sign out", value: "/sign-out" }
];

class App extends Component {
  move = (e, { value }) => {
    this.props.history.push('value')
  }

  render() {
    return (
      <div>
        <Dropdown
          options={options}
          trigger={trigger}
          icon={null}
          onChange={this.move}
        />
      </div>
    );
  }
}

【讨论】：

【解决方案3】：

我的解决方案基于 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;

【讨论】：