Question

我有一个<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>
    ))

那很好，但是我希望带有图标的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>
    )
};

任何帮助将不胜感激。

Answer 1

    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>
       );
    }

Answer 2

在Button渲染中，您可以执行以下操作：

Button.js：

render(){
    const { icon } = this.props
    return(
        <Button>
            {icon && <Icon type={icon}/>}
        <Button>
    )
}

带有图标组件的按钮

2 个答案: