在React Styleguidist中从外部文件导入PropTypes的实现方法

没问题，我来给你梳理一下在styled-components组件里复用通用PropTypes的正确姿势，直接上实操示例：

1. 通用PropTypes的导出文件 #

假设你已经把通用的textProps存在了src/utils/textProps.js里，代码如下：

import PropTypes from 'prop-types';

export const textProps = {
  /** 标题文本 */
  children: PropTypes.node.isRequired,
  /** 文本字重 */
  weight: PropTypes.oneOf(['thin', 'normal', 'semibold', 'bold']),
};

2. 在styled-components组件中复用 #

接下来在你的组件文件（比如src/components/StyledText.js）里，导入通用PropTypes，结合styled-components定义组件，并把通用props合并到组件的PropTypes中：

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { textProps } from '../utils/textProps';

// 定义styled组件，可直接使用复用的props做样式逻辑
const StyledText = styled.p`
  font-weight: ${props => {
    const weightMap = {
      thin: 300,
      normal: 400,
      semibold: 600,
      bold: 700,
    };
    // 优先使用传入的weight，默认用normal
    return weightMap[props.weight] || weightMap.normal;
  }};
  font-size: 16px;
  line-height: 1.5;
  // 如果有自定义的color prop，也可以在这里使用
  color: ${props => props.color || '#333'};
`;

// 复用通用textProps，同时可以添加组件专属的PropTypes
StyledText.propTypes = {
  ...textProps,
  /** 文本颜色（组件专属props） */
  color: PropTypes.string,
};

// 可选：设置默认props，包括通用props的默认值
StyledText.defaultProps = {
  weight: 'normal',
  color: '#333',
};

export default StyledText;

3. 使用组件的示例 #

在其他地方使用这个组件时，就可以直接传入复用的props或者组件专属props：

import StyledText from './components/StyledText';

function App() {
  return (
    <div>
      <StyledText weight="bold">这是粗体文本</StyledText>
      <StyledText color="darkblue">这是蓝色普通文本</StyledText>
      <StyledText weight="thin">这是细体文本</StyledText>
    </div>
  );
}

关键要点 #

• 用ES6扩展运算符...textProps可以快速把通用PropTypes合并到组件的propTypes对象中，避免重复代码
• styled-components的组件和普通React组件一样，支持直接设置.propTypes和.defaultProps属性
• 如果需要给通用props加默认值，直接在组件的defaultProps里定义即可

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