时间戳

首页 > 解决方案 > 如何使用相同的按钮样式但不同的操作（ReactJs）

javascript - 如何使用相同的按钮样式但不同的操作（ReactJs）

问题描述

嗨，现在我在我的投资组合网站上工作，我正在尝试制作一个使用相同样式但想将其用于两个按钮 (1) 转到某个页面 (2) 下载简历的按钮。但他们都做了动作（1）。我不知道如何让这两个按钮做不同的工作。

这是按钮的代码，

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';

const STYLES =['btn--primary', 'btn--outline'];
const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
children, 
type, 
onClick,
buttonStyle,
buttonSize
}) => {

const checkButtonStyle = STYLES.includes(buttonStyle) 
? buttonStyle
: STYLES[0];

const checkButtonSize = SIZES.includes(buttonSize)
? buttonSize
: SIZES[0];

return <Link to="/some-page" className='btn-mobile'>
    <button
    className={`btn ${checkButtonStyle} ${checkButtonSize}`}
    onClick={onClick}
    type={type}
    >
    {children}
    </button>
    </Link>
    };

这是两个按钮的代码

  <div className='hero-btns'>
            <Button className='btns' 
            buttonStyle='btn--outline'
            buttonSize='btn--large'
            >
            PORTFOLIO 
            </Button>
            <Button
            className='btns' 
            buttonStyle='btn--primary'
            buttonSize='btn--large'
            >
                DOWNLOAD CV<i class="fas fa-chevron-circle-down"></i>
            </Button>
        </div>

我正在研究 ReactJs /create-react-app。也许你可以给我推荐一个更简单的方法。

标签： javascriptreactjsreact-router

解决方案

您可以将动作作为道具传递给按钮组件。

<Button action="/PORTFOLIO-page">
   PORTFOLIO
</Button>
<Button action="/DOWNLOAD-CV-page">
   DOWNLOAD CV
</Button>

并将 Button 组件的代码更改为：

return <Link to={this.props.action}>
  <button
  >
  {children}
  </button>
 </Link>
};

你可以传递任意数量的道具。

推荐阅读