如何将子组件嵌入按钮中

Question

嗨，我正在尝试在React Javascript的按钮中嵌入子组件。我正在使用Framer X中的按钮为我的网站创建Nav，并且我想确保图标可以具有悬停状态并附加到Framer X中的唯一图形上。这样做可能更简单，但这是看看我正在使用的代码。

import * as React from "react"
import {
  PropertyControls,
  ControlType
} from 'framer'
import styled from "styled-components";
import {
  Component
} from "react";


interface Props {
  isPrimary: boolean,
    isOutline: boolean,
    label: string,
    isIcon: string,
    backgroundColor: string,
    textColor: string,
    fontFamily: "-apple-system" | "Arial" | "Bebas" | "Courier" | "Courier New" | "Futura" | "Geneva" | "Georgia" | "Gill Sans" | "Helvetica" | "Helvetica Neue" | "Lucida Grande" | "Menlo" | "Monaco" | "Tahoma" | "Times" | "Verdana",
    fontSize: "12" | "14" | "16" | "18" | "20" | "22" | "24",
    fontWeight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900",
    letterSpacing: number,
    textTransform: "none" | "lowecase" | "uppercase",
    borderRadius: number,
    borderWidth: number,
}


const StyledButton = styled < Props,
  any > ('button')
`
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: ${props => props.isPrimary ? props.backgroundColor : props.backgroundColor};
    color: ${props => props.isPrimary ? props.textColor : props.isOutline ? props.backgroundColor : props.textColor};
    border-width: ${props => props.isOutline ? props.borderWidth : 1}px;
    border-style: solid;
    border-color: ${props => props.backgroundColor};
    border-radius: ${props => props.borderRadius}px;
    box-shadow: ${props => props.isPrimary ? '0 6px 8px rgba(0, 0, 0, .12)' : props.isOutline && 'none'};
    overflow: hidden;
`

const StyledButtonInner = styled.span `
    display: flex;
    align-items: center;
    justify-content: center;
`

const style: React.CSSProperties = {
  height: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  color: "White",
  overflow: "hidden",
  borderRadius: "10px",
};


const StyledText = styled < Props,
  any > ('span')
`
    font-family: ${props => props.fontFamily};
    font-weight: ${props => props.fontWeight};
    font-size: ${props => props.fontSize}px;
    letter-spacing: ${props => props.letterSpacing / 100}em;
    text-transform: ${props => props.textTransform};
`

const newLocal = "Text";
export class Button extends Component < Props > {

    static defaultProps = {
      width: 160,
      height: 44,
      isPrimary: false,
      isOutline: false,
      label: "Hello Friend!",
      IconContainer: true,
      isIcon: "Hello World",
      backgroundColor: "#F59D0D",
      textColor: "white",
      fontFamily: "-apple-system",
      fontSize: "16",
      fontWeight: "600",
      letterSpacing: 2,
      textTransform: "none",
      borderRadius: 8,
      borderWidth: 1,
    }

    static propertyControls: PropertyControls < Props > = {
      isPrimary: {
        type: ControlType.Boolean,
        title: "Primary"
      },
      isOutline: {
        type: ControlType.Boolean,
        hidden: props => props.isPrimary,
        title: "Outline"
      },
      label: {
        type: ControlType.String,
        title: "Button Label"
      },
      backgroundColor: {
        type: ControlType.Color,
        title: "Background Color"
      },
      IconContainer: {
        isIcon: ControlType.String,
        title: "Text"
      },
      textColor: {
        type: ControlType.Color,
        hidden: props => props.isOutline && !props.isPrimary,
        title: "Text Color"
      },
      fontFamily: {
        type: ControlType.Enum,
        options: ["-apple-system", "Bebas", "Arial", "Courier", "Courier New", "Futura", "Geneva", "Georgia", "Gill Sans", "Helvetica", "Helvetica Neue", "Lucida Grande", "Menlo", "Monaco", "Tahoma", "Times", "Verdana"],
        title: "Font Family"
      },
      fontSize: {
        type: ControlType.Enum,
        options: ["12", "14", "16", "18", "20", "22", "24"],
        title: "Font Size"
      },
      fontWeight: {
        type: ControlType.Enum,
        options: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
        title: "Font Weight"
      },
      textTransform: {
        type: ControlType.SegmentedEnum,
        options: ["none", "lowercase", "uppercase"],
        optionTitles: ["None", "Lower", "Upper"],
        title: "Text Transform"
      },
      letterSpacing: {
        type: ControlType.Number,
        min: 0,
        max: 50,
        title: "Letter Spacing"
      },
      borderRadius: {
        type: ControlType.Number,
        title: "Border Radius"
      },
      borderWidth: {
        type: ControlType.Number,
        title: "Border Width"
      },
    }


    render() {
      const {
        isPrimary,
        isOutline,
        backgroundColor,
        textColor,
        label,
        fontFamily,
        fontSize,
        fontWeight,
        letterSpacing,
        textTransform,
        isIcon,
        borderRadius,
        borderWidth,
      } = this.props
      return ( <
        StyledButton isPrimary = {
          isPrimary
        }
        isOutline = {
          isOutline
        }
        backgroundColor = {
          backgroundColor
        }
        textColor = {
          textColor
        }
        borderRadius = {
          borderRadius
        }
        borderWidth = {
          borderWidth
        } >
        <
        StyledButtonInner > {
          isIcon && < IconContainer style = {
            style
          } > {
            this.props.children
          } {
            isIcon
          } < /IconContainer>} <
          StyledText fontFamily = {
            fontFamily
          }
          fontSize = {
            fontSize
          }
          fontWeight = {
            fontWeight
          }
          letterSpacing = {
            letterSpacing
          }
          textTransform = {
            textTransform
          } > {
            label
          } < /StyledText> <
          /StyledButtonInner> <
          /StyledButton>
        );
      }
    }