javascript - 高阶组件上的 PropTypes

Question

有没有办法让高阶组件内部组件的 PropTypes 指向它们的创建位置？

这是一个小样本，但如果整个应用程序在单独的文件中有多个 EnhancedButtons，这将很难调试。

由于高阶组件是为可重用性而设计的，因此我们可能永远不知道缺少 handleClick 方法的组件的位置。 _EnhancedButton 的 render 方法是我们想要增强的任何 Component 的变量。

有什么方法可以使 PropTypes 在创建时更加明显，例如插入的 FinalButton 并且是 _EnhancedButton 的实例并且缺少 Prop handleClick ？

https://jsfiddle.net/kriscoulson/sh2b8vys/3/

var Button = (props) => (
	<button onClick={ () => props.handleClick() }>
		Submit
	</button>
);

Button.propTypes = {
	handleClick: React.PropTypes.func.isRequired
}

const EnhanceButton = Component => class _EnhancedButton extends React.Component {
	render () {
  	return (<Component { ...this.props }>{this.props.children}</Component>);
  }
}

const FinalButton = EnhanceButton(Button);

ReactDOM.render(
  <FinalButton />,
  document.getElementById('container')
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

您的示例中的名称 FinalButton 不会使用react，因为这只是您的局部变量名称，但我们会将结果组件的名称更改为您想要的任何名称。在这里，无论原始名称是什么，我都在前面使用“Final”。

此外，我们可以将 Prop 类型复制/合并到新元素。

function EnhanceButton(Component) {
    class _EnhancedButton extends React.Component {
        static displayName = 'Final' + (Component.displayName || Component.name || 'Component');

        render() {
            return (
                <Component { ...this.props }>{this.props.children}</Component>
            );
        }
    }
    _EnhancedButton.propTypes = Component.propTypes;

    return _EnhancedButton;
}

这给出:警告:失败 propType:必需的 Prop handleClick 未在 Button 中指定。检查 FinalButton 的渲染方法。

fiddle :https://jsfiddle.net/luggage66/qawhfLqb/