Fix: TypeScript <Layout> requires a tagName property (#15181)

* fix #15162

* force safe type casting

* get rid of non-null assertion

* get rid of non-null assertion
This commit is contained in:
ngolin 2019-03-05 14:39:43 +08:00 committed by 偏右
parent 7724fee91a
commit cb5fe6cbf8

View File

@ -11,11 +11,14 @@ export interface GeneratorProps {
export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
hasSider?: boolean;
}
interface BasicPropsWithTagName extends BasicProps {
tagName: 'header' | 'footer' | 'main' | 'section';
}
function generator({ suffixCls, tagName }: GeneratorProps) {
return (BasicComponent: React.ComponentClass<BasicProps>): any => {
return (BasicComponent: React.ComponentClass<BasicPropsWithTagName>): any => {
return class Adapter extends React.Component<BasicProps, any> {
static Header: any;
static Footer: any;
@ -36,15 +39,11 @@ function generator({ suffixCls, tagName }: GeneratorProps) {
};
}
class Basic extends React.Component<BasicProps, any> {
class Basic extends React.Component<BasicPropsWithTagName, any> {
render() {
const { prefixCls, className, children, tagName: CustomElement, ...others } = this.props;
const { prefixCls, className, children, tagName, ...others } = this.props;
const classString = classNames(className, prefixCls);
return (
<CustomElement className={classString} {...others}>
{children}
</CustomElement>
);
return React.createElement(tagName, { className: classString, ...others }, children);
}
}
@ -52,7 +51,7 @@ interface BasicLayoutState {
siders: string[];
}
class BasicLayout extends React.Component<BasicProps, BasicLayoutState> {
class BasicLayout extends React.Component<BasicPropsWithTagName, BasicLayoutState> {
static childContextTypes = {
siderHook: PropTypes.object,
};
@ -76,15 +75,11 @@ class BasicLayout extends React.Component<BasicProps, BasicLayoutState> {
}
render() {
const { prefixCls, className, children, hasSider, tagName: CustomElement, ...others } = this.props;
const { prefixCls, className, children, hasSider, tagName, ...others } = this.props;
const classString = classNames(className, prefixCls, {
[`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0,
});
return (
<CustomElement className={classString} {...others}>
{children}
</CustomElement>
);
return React.createElement(tagName, { className: classString, ...others }, children);
}
}