Как связать или направить компонент раскрывающегося списка реагирующего семантического интерфейса

Question

Я новичок в Реагировании. Я пытаюсь добавить ссылки в выпадающее меню React Semantic UI. Ниже приведен компонент, который я извлек из семантического интерфейса React

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" в массив параметров и добавил пути к маршрутизатору, который находится в другом компоненте, но он не работает. Любая помощь будет оценена, спасибо.

Answer 1

Вы можете попробовать что-то вроде этого. измените ключ на на значение в вашем массиве опций. затем используйте 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>
    );
  }
}