React-Bootstrap TypeScript - 如何创建一个 ImageButton

Question

Long time I haven't come on SO to post a question but today... I am stuck on a new story and require your help!

I am trying to reproduce a design (html/css/jquery) (that is way to hard to maintain) into Bootstrap using react-bootstrap .

I have the given button on my original website:

I would like to reproduce it with the react-bootstrap library. However, I am kind of stuck as I don't understand one point or two.

I have the following component:

image_button.tsx

import * as React from "react";
import { Button, Image } from "react-bootstrap";
import { ImageProps } from "react-bootstrap/Image";
import { ButtonProps } from "react-bootstrap/Button";

export interface ImageButtonProps {
  hoverSrc: string;
}

export interface ImageButtonState {

}

export class ImageButton extends React.Component<ImageProps & ButtonProps & ImageButtonProps, ImageButtonState> {
  render() {
    return <Button active={this.props.active} block={this.props.block} variant={this.props.variant} size={this.props.size} type={this.props.type} href={this.props.href} disabled={this.props.disabled} target={this.props.target} className={`image-button`}>
      <Image src={this.props.src}/>
    </Button>
  }
}

export default ImageButton;

• The first question that comes to my mind is: Do I have at least the right approach?
• If I do, then how or what would be the best way to pass all the props to my sub-component? As you see, I use a "mapping" approach where I set all the values which might not be the best way to do it...
• Let say I want to customize it (when hover, change the background image?), how can I apply styles to my component?

Note: My ultime goal would be to have a generic component that takes as props all the button/image props (and apply them) as well as ImageButton props that can be :hover { src: /path/to/media.png }

Thanks for any help around the subject :) I know the question is quite wide and not focus on a simple/precise point :)

Best,

Max

Answer 1

since the addition of react hooks people have been moving into functional components instead of Objects.

an easy way to map all properties is using the spread operator so something like this

function ImageButton({src, ...props}) {
    return <Button {...props}>
        <Image src={src} />
    </Button>
}

export default ImageButton

also you can use css along side reactjs by importing the css file import './style.css'