Question

我对该组件的目标是拥有一个按钮/链接/等，以呈现onClick（一个下拉菜单）。然后让我们来谈谈功能。我希望它执行以下操作：

处理onClick以打开/关闭下拉菜单。
使用{label: "string", Icon="React Component"}来获取对象数组，并映射这些项目。 Icon组件非常简单，并发布在下面。

我有些固执，但已经取得了一些进展。这是Icon组件：

import React from 'react';
import PropTypes from 'prop-types';
import 'font-awesome/css/font-awesome.min.css';

const Icon = props => {
  const { icon, className, ...rest } = props;
  return <i {...rest} className={`fa fa-${icon} ${className}`} aria-hidden="true" />;
};

Icon.defaultProps = {
  className: ''
};

Icon.propTypes = {
  icon: PropTypes.string.isRequired,
  className: PropTypes.string,
  type: PropTypes.string
};

export default Icon;

这是我当前的下拉菜单：

import React, { Component, Fragment } from 'react';
import Icon from './Icon';

import './index.scss';

export interface Props {
  options: string;
  data: any;
  onselect: any;
  item: string;
}
export interface State {
  isOpen: boolean;
}

const data = [{'one', 'cog'}, {'two', 'lock'}];

class HeaderMenuButton extends Component<Props, State> {
  public readonly state: Readonly<State> = {
    isOpen: false
  };

  onHandleclick = () => {
    this.setState({
      isOpen: true
    });
  };

  render() {
    const { isOpen } = this.state;
    const { options } = this.props;
    return (
      <Fragment>
        <i className="fa fa-ellipsis-h fa-lg circle">{data[options]}</i>
        {isOpen}{' '}
        <ul className="dropdown-menu">
          {data.map((item) => (
            <li key={item} className={item === options ? 'selected' : null}>
              <Icon
                onClick={() => this.onselect(item)}
                icon="cog"
                label={item}
              />
            </li>
          ))}
        </ul>
      </Fragment>
    );
  }
}

export default HeaderMenuButton;

告诉您真相，我快要废弃第二个组件并重新制作。您能帮我从我的情况中得到一些帮助吗？

ReactJS |带打字稿的可重用组件

0 个答案: