Ant Design按钮自动插入空格的特性小结

这是一个特性

对于 Ant Design 按钮而言，有一个特殊的特性，当按钮内容仅为两个中文字符时，会自动地在两个中文字符间插入一个空格。比如：

并且在 Ant Design 的 Button 组件文档中专门对此特性进行了说明：

如何移除两个汉字之间的空格？

根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。

而从 ConfigProvider API 中可以知道，其参数 autoInsertSpaceInButton 默认值为 true，即“插入空格”特性是默认行为。

源码分析

下面简单了解下 Button 组件与此特性相关的源码。

// 是否有插入空格的需要
function isNeedInserted() {
  var _this$props = this.props,
      icon = _this$props.icon,
      children = _this$props.children;
  return React.Children.count(children) === 1 && !icon;
}

// 判断文本是否为两个中文字符的函数
var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);

// 根据需要插入空格
function insertSpace(child, needInserted) {
  // Check the child if is undefined or null.
  if (child == null) {
    return;
  }

  var SPACE = needInserted ? ' ' : ''; // strictNullChecks oops.

  if (typeof child !== 'string' && typeof child !== 'number' && isString(child.type) && isTwoCNChar(child.props.children)) {
    return React.cloneElement(child, {}, child.props.children.split('').join(SPACE));
  }

  if (typeof child === 'string') {
    if (isTwoCNChar(child)) {
      child = child.split('').join(SPACE);
    }

    return React.createElement("span", null, child);
  }

  return child;
}

---