React + TypeScript 默认 Props 的处理

不约儿童 發表於 2019-9-24 00:11:00

<table class="d-block">
<tbody class="d-block">
<tr class="d-block">
 <td class="d-block comment-body markdown-body js-comment-body rgh-linkified-code">
<h2>React 中的默认 Props</h2>
通过组件的 <code>defaultProps</code> 属性可为其 <code>Props</code> 指定默认值。
以下示例来自 React 官方文档 - Default Prop Values：
<div class="highlight highlight-source-js"><pre>class Greeting extends React.Component {
render() {
return (
 <h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props: 
Greeting.defaultProps = { 
name: 'Stranger' 
};
// Renders "Hello, Stranger": 
ReactDOM.render( 
<Greeting />, 
document.getElementById('example') 
);</pre></div>
如果编译过程使用了 Babel 的 transform-class-properties 插件，还可以这么写：
<div class="highlight highlight-source-js"><pre>class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
}
render() { 
return ( 
<div>Hello, {this.props.name}</div> 
) 
} 
}</pre></div>
<h2>加入 TypeScript</h2>
加入 TypeScript 后
<div class="highlight highlight-source-tsx"><pre>interface Props {
name?: string;
}
class Greeting extends React.Component<Props, {}> { 
static defaultProps = { 
name: "stranger", 
};
render() { 
return <div>Hello, {this.props.name}</div>; 
} 
}</pre></div>
此时不支持直接通过类访问 <code>defaultProps</code> 来赋值以设置默认属性，因为 <code>React.Component</code> 类型上并没有该属性。
<div class="highlight highlight-source-ts"><pre>// 🚨Property 'defualtProps' does not exist on type 'typeof Greeting'.ts(2339)
Greeting.defualtProps = {
name: "stranger",
};</pre></div>
<h3>默认属性的类型</h3>
上面虽然实现了通过 <code>defaultProps</code> 来指定属性的默认值，但 <code>defaultProps</code> 的类型是不受约束的，和 <code>Props</code> 没有关联上。以至于我们可以在 <code>defaultProps</code> 里面放任何值，显然这是不科学的。
<div class="highlight highlight-source-diff"><pre>class Greeting extends React.Component<Props, {}> {
static defaultProps = {
name: "stranger",
// 并不会报错
+ foo: 1,
+ bar: {},
};
// ...
}</pre></div>
同时对于同一字段，我们不得不书写两次代码。一次是定义组件的 <code>Props</code>，另一次是在 <code>defaultProps</code> 里。如果属性有增删或名称有变更，两个地方都需要改。
为了后面演示方便，现在给组件新增一个必填属性 <code>age:number</code>。
<div class="highlight highlight-source-ts"><pre>interface Props {
age: number;
name?: string;
}
class Greeting extends React.Component<Props, {}> { 
static defaultProps = { 
name: "stranger", 
};
render() { 
const { name, age } = this.props; 
return ( 
<div> 
Hello, {name}, my age is {age} 
</div> 
); 
} 
}</pre></div>
通过可选属性抽取出来，利用 <code>typeof</code> 获取其类型和必传属性结合来形成组件的 <code>Props</code> 可解决上面提到的两个问题。
所以优化后的代码成了：
<div class="highlight highlight-source-tsx"><pre>const defaultProps = {
name: "stranger",
};
type Props = { 
age: number; 
} & Partial<typeof defaultProps>;
class Greeting extends React.Component<Props, {}> { 
static defaultProps = defaultProps;
render() { 
const { name, age } = this.props; 
return ( 
<div> 
Hello, {name}, my age is {age} 
</div> 
); 
} 
}</pre></div>
注意我们的 <code>Props</code> 是通过和 <code>typeof defaultProps</code> 组合而形成的，可选属性中的 <code>name</code> 字段在整个代码中只书写了一次。
当我们更新了 <code>defaultProps</code> 时整个组件的 <code>Props</code> 也同步更新，所以 <code>defaultProps</code> 中的字段一定是组件所需要的字段。
<h2>默认值的判空检查优化</h2>
讲道理，如果属性提供了默认值，在使用时，可不再需要判空，因为其一定是有值的。但 TypeScript 在编译时并不知道，因为有默认值的属性是被定义成可选的 <code>?</code>。
比如我们尝试访问 <code>name</code> 属性的长度，
<div class="highlight highlight-source-tsx"><pre>class Greeting extends React.Component<Props, {}> {
static defaultProps = defaultProps;
render() { 
const { name } = this.props; 
return ( 
<div> 
{/ 🚨Object is possibly 'undefined'.ts(2532) /} 
name length is {name.length} 
</div> 
); 
} 
}</pre></div>
因为此时我们的 <code>Props</code> 实际上是：
<div class="highlight highlight-source-ts"><pre>type Props = {
age: number;
} & Partial<typeof defaultProps>;
// 相当于：
type Props = {
age: number;
name?: string;
};</pre></div>
修正方法有多个，最简单的是使用非空判定符/Non-null assertion operator。
<h3>非空判定符</h3>
<div class="highlight highlight-source-diff"><pre>- name length is {name.length}
+ name length is {name!.length}</pre></div>
这意味着每一处使用的地方都需要做类似的操作，当程序复杂起来时不太可控。但多数情况下应付日常使用，这样已经够了。
<h3>类型转换</h3>
因为组件内部有默认值的保证，所以字段不可能为空，因此，可对组件内部使用非空的属性类型来定义组件，而对外仍暴露原来的版本。
<div class="highlight highlight-source-diff"><pre>const Greeting = class extends React.Component<
-Props,
+Props & typeof defaultProps,
{}
> {
static defaultProps = defaultProps;
render() { 
const { name } = this.props; 
return ( 
<div> 
- name length is {name!.length} 
+ name length is {name.length} 
</div> 
); 
} 
-}; 
+} as React.ComponentClass<Props>;</pre></div>
通过 <code>as React.ComponentClass<Props></code> 的类型转换，对外使用 <code>Greeting</code> 时属性中 <code>name</code> 还是可选的，但组件内部实际使用的是 <code>Props & typeof defaultProps</code>，而不是 <code>Partial<T></code> 版本的，所以规避了字段可能为空的报错。
<h3>通过高阶组件的方式封装默认属性的处理</h3>
通过定义一个高阶组件比如 <code>withDefaultProps</code> 将需要默认属性的组件包裹，将默认值的处理放到高阶组件中，同样可解决上述问题。
<div class="highlight highlight-source-tsx"><pre>function withDefaultProps<P extends object, DP extends Partial<P>>(
dp: DP,
component: React.ComponentType<P>,
) {
component.defaultProps = dp;
type RequiredProps = Omit<P, keyof DP>;
return (component as React.ComponentType<any>) as React.ComponentType<
RequiredProps & DP
>;
}</pre></div>
然后我们的组件则可以这样来写：
<div class="highlight highlight-source-tsx"><pre>const defaultProps = {
name: "stranger",
};
interface Props { 
name: string; 
age: number; 
}
const _Greeting = class extends React.Component<Props, {}> { 
public render() { 
const { name } = this.props; 
return <div>name length is {name.length}</div>; 
} 
};
export const Greeting = withDefaultProps(defaultProps, _Greeting);</pre></div>
这种方式就比较通用一些，将 <code>withDefaultProps</code> 抽取成一个公共组件，后续其他组件都可使用。但此种情况下就没有很好地利用已经定义好的默认值 <code>defaultProps</code> 中的字段，书写 <code>Props</code> 时还需要重复写一遍字段名。
<h2>相关资源</h2>
<ul>
<li>React docs - Default Prop Values</li>
<li>Default property value in React component using TypeScript</li>
<li>React, TypeScript and defaultProps dilemma</li>
</ul></td>
</tr>
</tbody>
</table>

</div>
<div id="MySignature" role="contentinfo">
<div>
<img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" style="vertical-align: middle">
CC BY-NC-SA 署名-非商业性使用-相同方式共享
</div> 
来源：https://www.cnblogs.com/Wayou/p/react_typescript_default_props.html

頁: [1]

琼殿技术论坛's Archiver

React + TypeScript 默认 Props 的处理