时间戳

首页 > 解决方案 > 带有图标组件的按钮

reactjs - 带有图标组件的按钮

问题描述

我有一个<Button />组件和一个<Icon/>组件。

我尝试实现一个带有图标的按钮。

故事Button.jsx：

import React from "react";
import { storiesOf } from "@storybook/react";
import Button from "../components/Button";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";

storiesOf("Button/Primary", module)
    .add("With icon", () => (
        <Button><Icon type={iconTypes.arrowRight}/></Button>
    ))

效果很好，但我希望带有图标的按钮的 api 是-

<Button icon={icons.arrow}>Click Me</Button>

我怎样才能做到这一点？

故事Icon.jsx：

import React from "react";
import { storiesOf } from "@storybook/react";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";    

storiesOf("Icon", module)
    .add("Arrow Right", () => (
        <Icon type={iconTypes.arrowRight}>
        </Icon>
    ))
    .add("Arrow Left", () => (
        <Icon type={iconTypes.arrowLeft}>
        </Icon>
    ));

<Button />组件：

import React from 'react';
import { css, cx } from 'emotion';

import colors from '../styles/colors';

export default function Button({
  children,
  ...props
}) {
    const mergedStyles = cx(
  // css
  );
  // other css stuff
  return (
    <button {...props} disabled={disabled} className={mergedStyles}>
      {children}
    </button>
  );

和<Icon />组件：

import React from "react";
import { css } from 'emotion';

import ArrowRight from "./arrow-right2.svg";
import ArrowLeft from "./arrow-left2.svg";

export const iconTypes = {
    arrowRight: 'ARROW_RIGHT',
    arrowLeft: 'ARROW_LEFT',
}

const iconSrc = {
    ARROW_RIGHT: ArrowRight,
    ARROW_LEFT: ArrowLeft,
}


const circleStyles = css({
    width: 24,
    height: 24,
    borderRadius: "50%",
    backgroundColor: "#f7f7f9",
    display: "flex",
    justifyContent: "center"
});


export default function Icon({ type }) {
    return (
         <div className={circleStyles}>
            <img src={iconSrc[type]} />
        </div>
    )
};

任何帮助，将不胜感激。

标签： reactjs

解决方案

    import React from 'react';
    import {css, cx} from 'emotion';
    import colors from '../styles/colors';

    //import your ICON component & make sure your path is right
    import Icon from "./../Icon";

    export default function Button({
      children,
      disabled,
      icon,
      ...props
    }) {

      const mergedStyles = cx(//your css);

      return (
          <button {...props} disabled={disabled} className={mergedStyles}>

            // If icon prop is provided then render ICON component
            {icon && <Icon type={icon}/>}

            //Other children
            {children}

          </button>
       );
    }

推荐阅读