如何在styled-components样式的React按钮组件中修改两个span内容

你需要基于以下HTML结构封装React按钮组件，同时希望通过props（如spanContent1、spanContent2）来修改两个span的内容，而不是只能通过传递children的方式实现，这里提供几种可行方案：

原始HTML结构：

<button class="button_57" role="button">
   <span class="text">Button</span>
   <span>Alternate text</span>
</button>

方案一：纯文本内容传递（最基础） #

直接通过props接收两个span的文本内容，组件内部固定渲染带类名的span结构，适合只需要修改文本的场景：

import React from 'react';

const CustomButton = ({ 
  spanContent1 = 'Button', 
  spanContent2 = 'Alternate text', 
  ...otherProps 
}) => {
  return (
    <button className="button_57" role="button" {...otherProps}>
      <span className="text">{spanContent1}</span>
      <span>{spanContent2}</span>
    </button>
  );
};

// 使用示例
<CustomButton 
  spanContent1="提交表单" 
  spanContent2="点击确认" 
  onClick={() => handleSubmit()} 
/>

方案二：支持React节点传递（灵活度更高） #

如果需要给span添加样式、图标或其他复杂元素，可以让props接收React节点，这样不仅能传文本，还能传入任意JSX内容：

import React from 'react';

const CustomButton = ({ 
  span1 = <span className="text">Button</span>, 
  span2 = <span>Alternate text</span>, 
  ...otherProps 
}) => {
  return (
    <button className="button_57" role="button" {...otherProps}>
      {span1}
      {span2}
    </button>
  );
};

// 使用示例
<CustomButton 
  span1={<span className="text" style={{ fontWeight: 'bold' }}>删除</span>} 
  span2={<span><svg className="icon-trash"></svg> 永久删除</span>} 
/>

方案三：混合模式（兼容两种用法） #

如果希望同时支持props传内容和children传内容，可以做兼容处理，优先级可根据需求调整：

import React from 'react';

const CustomButton = ({ spanContent1, spanContent2, children, ...otherProps }) => {
  let span1, span2;

  // 优先使用props传递的内容
  if (spanContent1 && spanContent2) {
    span1 = <span className="text">{spanContent1}</span>;
    span2 = <span>{spanContent2}</span>;
  } 
  // 没有props则尝试使用children，确保是两个子元素
  else if (children && React.Children.count(children) === 2) {
    [span1, span2] = React.Children.toArray(children);
    // 自动给第一个span补上text类名（如果用户没传的话）
    span1 = React.cloneElement(span1, { 
      className: `${span1.props.className || ''} text`.trim() 
    });
  } 
  // 默认内容
  else {
    span1 = <span className="text">Button</span>;
    span2 = <span>Alternate text</span>;
  }

  return (
    <button className="button_57" role="button" {...otherProps}>
      {span1}
      {span2}
    </button>
  );
};

// 两种使用方式都支持
<CustomButton spanContent1="Props文本" spanContent2="Props备选" />
<CustomButton>
  <span>Children文本</span>
  <span>Children备选</span>
</CustomButton>

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