React 中的命名空间组件。如何使用类型检查

Question

代码：


const CustomCapsule = (props:CustomCapsuleTypes) =>{ 
        return( 
               <div direction={props.direction}>       
                   {props.children}
               </div> 
  )
}

CustomCapsule.Tab = ({title,active,onClick,tempKey}:TabItemProps) =>{
         return(<div>test</div>)
} 
    
 CustomCapsule.propTypes = {};   //   √

CustomCapsule.Tab.propTypes = {} //  ×.

错误：

属性 'propTypes' 在类型'({ title, active, onClick, tempKey }: TabItemProps) => Element' 上不存在。

Answer 1

有多种方法可以解决这个问题：

可以先设置道具类型，再分配子组件

const CustomCapsule = (props:CustomCapsuleTypes) => {}

const Tab = ({title,active,onClick,tempKey}:TabItemProps) => {} 
    
CustomCapsule.propTypes = {}

Tab.propTypes = {}

CustomCapsule.Tab = Tab;

或使用Object.assign:

const CustomCapsule = (props:CustomCapsuleTypes) => {}

CustomCapsule.Tab = Object.assign(
  ({title,active,onClick,tempKey}:TabItemProps) => {},
  { propTypes: {} }
)
    
CustomCapsule.propTypes = {}

React 中的命名空间组件。如何使用类型检查

Namespace component in React. How to use type checking

typescript

reactjs

react-proptypes