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

【问题标题】：How to use the same button style but different action (ReactJs)如何使用相同的按钮样式但不同的操作（ReactJs）
【发布时间】：2021-03-11 11:36:47
【问题描述】：

嗨，现在我正在开发我的投资组合网站，我正在尝试制作一个使用相同样式但想将其用于两个按钮 (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。也许你可以给我推荐一个更简单的方法。

【问题讨论】：

你好，你可以做的是，你可以给他们一个唯一的id，在onClick方法中你可以用id来识别他们，根据id你可以调用另一个各自的函数

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

【讨论】：