2021SC@SDUSC

Mentions提及

API

<Mentions onChange={onChange}> <Mentions.Option value="sample">Sample</Mentions.Option> </Mentions> 

属性：

部分源码

讯享网import * as React from 'react'; import classNames from 'classnames'; import RcMentions from 'rc-mentions'; import { 
    MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions'; import { 
    composeRef } from 'rc-util/lib/ref'; import Spin from '../spin'; import { 
    ConfigContext } from '../config-provider'; export const { 
    Option } = RcMentions; 

function loadingFilterOption() { 
    return true; } 

启用自定义过滤逻辑

讯享网export type MentionPlacement = 'top' | 'bottom'; 

弹开层的展开位置

讯享网

export interface OptionProps { 
    value: string; children: React.ReactNode; [key: string]: any; } export interface MentionProps extends RcMentionsProps { 
    loading?: boolean; } export interface MentionState { 
    focused: boolean; } interface MentionsConfig { 
    prefix?: string | string[]; split?: string; } interface MentionsEntity { 
    prefix: string; value: string; } 

设置选项接口、选中状态、触发关键字、选中项前后分隔符、提及实体等接口

讯享网interface CompoundedComponent extends React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLElement>> { 
    Option: typeof Option; getMentions: (value: string, config?: MentionsConfig) => MentionsEntity[]; } 

此处运用到了ForwardRefExoticComponent

interface ExoticComponent<P = { 
    }> { 
    / * NOTE: Exotic components are not callable. */ (props: P): (ReactElement|null); readonly $$typeof: symbol; } interface NamedExoticComponent<P = { 
    }> extends ExoticComponent<P> { 
    displayName?: string; } interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> { 
    defaultProps?: Partial<P>; propTypes?: WeakValidationMap<P>; } 

与ForwardRefRenderFunction主要区别在于

• ForwardRefRenderFunction不支持propType和defaultProps,而ForwardRefExoticComponent则支持
• ForwardRefExoticComponent有一个额外的typeof成员
• ForwardRefRenderFunction调用签名中有一个props对象，必需包含一个children成员以及一个ref对象作为参数，而ForwardRefExoticComponent的调用签名中只需要一个props对象的任意形式作为参数

讯享网interface ForwardRefRenderFunction<T, P = { 
    }> { 
    (props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null; displayName?: string; defaultProps?: never; propTypes?: never; } 

以上为ForwardRefRenderFunction作为参照

const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> = ( { 
    prefixCls: customizePrefixCls, className, disabled, loading, filterOption, children, notFoundContent, ...restProps }, ref, ) => { 
    const [focused, setFocused] = React.useState(false); const innerRef = React.useRef<HTMLElement>(); const mergedRef = composeRef(ref, innerRef); const { 
    getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext); const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => { 
    if (restProps.onFocus) { 
    restProps.onFocus(...args); } setFocused(true); }; const onBlur: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => { 
    if (restProps.onBlur) { 
    restProps.onBlur(...args); } setFocused(false); }; const getNotFoundContent = () => { 
    if (notFoundContent !== undefined) { 
    return notFoundContent; } return renderEmpty('Select'); }; const getOptions = () => { 
    if (loading) { 
    return ( <Option value="ANTD_SEARCHING" disabled> <Spin size="small" /> </Option> ); } return children; }; const getFilterOption = (): any => { 
    if (loading) { 
    return loadingFilterOption; } return filterOption; }; const prefixCls = getPrefixCls('mentions', customizePrefixCls); const mergedClassName = classNames( { 
    [`${ 
     prefixCls}-disabled`]: disabled, [`${ 
     prefixCls}-focused`]: focused, [`${ 
     prefixCls}-rtl`]: direction === 'rtl', }, className, ); return ( <RcMentions prefixCls={ 
   prefixCls} notFoundContent={ 
   getNotFoundContent()} className={ 
   mergedClassName} disabled={ 
   disabled} direction={ 
   direction} { 
   ...restProps} filterOption={ 
   getFilterOption()} onFocus={ 
   onFocus} onBlur={ 
   onBlur} ref={ 
   mergedRef as any} > { 
   getOptions()} </RcMentions> ); }; const Mentions = React.forwardRef<unknown, MentionProps>(InternalMentions) as CompoundedComponent; Mentions.displayName = 'Mentions'; Mentions.Option = Option; Mentions.getMentions = (value: string = '', config?: MentionsConfig): MentionsEntity[] => { 
    const { 
    prefix = '@', split = ' ' } = config || { 
   }; const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix]; return value .split(split) .map((str = ''): MentionsEntity | null => { 
    let hitPrefix: string | null = null; prefixList.some(prefixStr => { 
    const startStr = str.slice(0, prefixStr.length); if (startStr === prefixStr) { 
    hitPrefix = prefixStr; return true; } return false; }); if (hitPrefix !== null) { 
    return { 
    prefix: hitPrefix, value: str.slice((hitPrefix as string).length), }; } return null; }) .filter((entity): entity is MentionsEntity => !!entity && !!entity.value); }; export default Mentions;