我正在尝试使用单个PropTypes定义在多个组件中重用它，并且存在问题 . 我在单独的类中定义静态propTypes，然后将其作为模块导入 . 说，我有一个视图的React组件：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ExampleType from './example-type.js';
class MyComponent extends Component {
static propTypes = {
...ExampleType.propTypes, // <--- note here, that's how I'm trying to make it work
// and the line below duplicates same field from ExampleType.propTypes,
// this is needed because otherwise Linter throws an error
// that PropTypes is defined, but never used:
instanceName: PropTypes.string
}
static defaultProps = {
...ExampleType.defaultProps
}
render() {
return (
<div>
<h3>{this.props.instanceName}</h3>
<p>
{this.props.instanceValue}
</p>
</div>
)
}
}
example-type.js是：
import PropTypes from 'prop-types';
class ExampleType {
static propTypes = {
instanceName: PropTypes.string,
instanceValue: PropTypes.string
}
static defaultProps = {
instanceName: '',
instanceValue: ''
}
}
export default ExampleType;
这样做，PropTypes检查不会发生 . 如果我将defaultProps定义更改为没有spread运算符的定义：
static propTypes = {
// ...ExampleType.propTypes, // and now without spread ...
instanceName: PropTypes.string,
instanceValue: PropTypes.string
}
比它按预期工作 .
好吧，我知道重用单个属性类型的定义可以通过不同的方式获得，比如这里https://stackoverflow.com/a/37720537/2335174，但我很好奇为什么我的带有扩展运算符的变量不起作用 . 在两种情况下，MyComponent.propTypes对象在调试器中看起来都是相同的，有和没有传播 .
难道我做错了什么？
1 回答
它似乎对我有用，请看这里：https://codesandbox.io/s/jlll2zm6xv
你是否在你的Babel设置中包含了transform-object-rest-spread插件？