高阶组件上的PropTypes [英] PropTypes on Higher Order Components

问题描述

对于来自高阶组件内部组件的PropTypes，是否有办法指向它们的创建位置？

Is there a way for PropTypes from a component inside of a Higher Order Component to point back to where they were created?

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

This is a small sample but if there was multiple EnhancedButtons throughout an application in separate files this would be very hard to debug.

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

Since the Higher Order Component is ideally made for reusability we may never know the location of the component that is missing the handleClick method. The render method of _EnhancedButton is a variable for any Component that we want enhanced.

有没有办法让PropTypes在创建它们的地方更加明显，例如插入的 FinalButton 并且是<$ c $的实例c> _EnhancedButton 并且缺少prop handleClick？

Is there any way to make the PropTypes more obvious where they are being created such as FinalButton which is inserted and is an instance of _EnhancedButton and is missing the 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>

推荐答案

您的示例中的名称 FinalButton 将无法做出反应，因为这只是您的本地变量名，但我们更改了结果组件的名称无论你想要什么。在这里，无论原始名称是什么，我都会使用Final。

The name FinalButton in your example won't be known to react since that is just your local variable name, but we change the name of the resulting component to whatever you want. Here I use "Final" in front of whatever the original name was.

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

Also, we can copy / merge the prop types over to the new element.

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失败：必需道具在按钮中未指定handleClick 。检查 FinalButton 的渲染方法。

This gives: Warning: Failed propType: Required prop handleClick was not specified in Button. Check the render method of FinalButton.

小提琴： https://jsfiddle.net/luggage66/qawhfLqb/

这篇关于高阶组件上的PropTypes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！