React简单按钮组件无法接收变量问题求助

嘿，刚接触React5天就能想到封装复用组件，这个思路真的很赞！重复的UI组件抽成通用组件绝对是提升代码模块化和健壮性的正确方向，我帮你把这个ActionButton组件补全并优化得更实用：

import { Link } from 'react-router-dom';

// 封装可复用的路由按钮组件
function ActionButton({ to, children, className = '', ...rest }) {
  return (
    <Link 
      to={to}
      className={`action-button ${className}`}
      {...rest}
    >
      {children}
    </Link>
  );
}

export default ActionButton;

组件参数说明 #

• to：必填项，对应react-router-dom中Link组件的to属性，支持字符串路径（比如'/home'）或路由对象（比如{ pathname: '/detail', state: { id: 123 } }）
• children：按钮显示的文本或自定义内容，直接嵌套在组件标签内即可
• className：可选参数，用来添加自定义CSS类，方便根据不同场景修改按钮样式
• ...rest：剩余属性，用来传递Link组件支持的其他属性（比如replace、state等），让组件更灵活

实际使用示例 #

// 在其他组件中引入并使用
import ActionButton from './ActionButton';

function HomePage() {
  return (
    <div className="home-page">
      <h1>欢迎来到首页</h1>
      
      {/* 基础路由跳转 */}
      <ActionButton to="/profile">查看个人资料</ActionButton>
      
      {/* 带自定义样式+replace模式跳转 */}
      <ActionButton 
        to="/settings" 
        className="btn-primary"
        replace
      >
        前往设置页
      </ActionButton>
      
      {/* 携带路由状态跳转 */}
      <ActionButton 
        to={{ 
          pathname: '/article', 
          state: { articleId: 456 } 
        }}
      >
        查看文章详情
      </ActionButton>
    </div>
  );
}

额外优化小技巧 #

• 添加默认样式：给.action-button写基础CSS样式（比如内边距、背景色、圆角等），让按钮默认就有统一的视觉风格
• 必填参数校验：可以用PropTypes或TypeScript给props加类型约束，避免忘记传to导致错误：

  import PropTypes from 'prop-types';
  
  ActionButton.propTypes = {
    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
    children: PropTypes.node.isRequired,
    className: PropTypes.string
  };
  

• 兼容普通按钮场景：如果需要支持非路由跳转的普通按钮，可以加onClick参数，当存在该参数时渲染<button>而非<Link>：

  function ActionButton({ to, onClick, children, className = '', ...rest }) {
    if (onClick) {
      return (
        <button 
          onClick={onClick}
          className={`action-button ${className}`}
          {...rest}
        >
          {children}
        </button>
      );
    }
    return (
      <Link 
        to={to}
        className={`action-button ${className}`}
        {...rest}
      >
        {children}
      </Link>
    );
  }
  

内容的提问来源于stack exchange，提问作者Robolisk