我来帮你把这段Vue的插槽代码转换成React的实现，思路和Vue逻辑完全对齐，只是写法上适配React的习惯：

首先，React没有Vue那样的“具名插槽”语法，但我们可以通过自定义props实现同样的效果——默认插槽对应props.children，具名插槽（比如你的dotShape）可以用一个专门的props来传递。下面是和你Vue代码完全对应的React实现：

import React from 'react';
import PropTypes from 'prop-types'; // 可选，用于类型校验

const Sample = ({ text, shape, children, dotShape }) => {
  // 这里可以还原你Vue里的badgeClass、badgeStyle计算逻辑
  const badgeClass = ''; // 替换成你的实际计算规则
  const badgeStyle = {}; // 替换成你的实际样式逻辑

  return (
    <div className="badge-box">
      {/* 对应Vue中非dot形状的默认插槽区域 */}
      {shape !== 'dot' && (
        <span className={badgeClass} style={badgeStyle}>
          <span className="line-break">
            {/* 优先用传入的插槽内容，没有则显示text，对应Vue插槽的默认值 */}
            {children || text}
          </span>
        </span>
      )}

      {/* 对应Vue中dot形状的具名插槽区域 */}
      {shape === 'dot' && (
        <span className="line-break" style={{ marginLeft: '8px' }}>
          {/* 优先用传入的dotShape内容，没有则显示text */}
          {dotShape || text}
        </span>
      )}
    </div>
  );
};

// 可选：定义props类型校验，和Vue的props类型声明对应
Sample.propTypes = {
  text: PropTypes.string,
  shape: PropTypes.oneOf(['dot', 'normal']), // 根据你的实际shape选项调整
  children: PropTypes.node,
  dotShape: PropTypes.node,
};

// 可选：设置默认props，对应Vue的props默认值
Sample.defaultProps = {
  text: '',
  shape: 'normal',
};

export default Sample;

使用方式说明： #

• 默认插槽的使用（对应Vue的<slot>）：

  <Sample text="默认内容" shape="normal">
    <span>我是自定义的默认插槽内容</span>
  </Sample>
  

• 具名插槽的使用（对应Vue的<slot name="dotShape">）：

  <Sample text="Dot默认内容" shape="dot" dotShape={<span>我是Dot形状的自定义内容</span>} />
  

关键对应关系： #

• Vue默认插槽<slot> → React的props.children
• Vue具名插槽<slot name="dotShape"> → React的自定义props（比如示例中的dotShape）
• Vue插槽默认内容{{text}} → React中用||逻辑判断，优先使用传入的插槽内容，无内容则回显text

这样写就完全复刻了你Vue组件的功能，而且符合React的组件设计习惯~

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