Question

我在App组件上为所有传递给孩子的道具建立了PropTypes。

class App extends Component {
    constructor( props ) {
        super( props );

        this.state = {
            anyProps : undefined',
        };
    }

    propsValues = {
        anyProp: [ 'undefined', 'neutral', 'evil', 'good' ],
    };

   (...)

我可以在子无状态组件上接收PropTypes，并使用其值来验证其他props，例如：

const SFComponent = ({
    anyProp,
    propsValues,
}) => {

    SFComponent.propTypes = {
        anyProp : PropTypes.oneOf( propsValues.anyProp ).isRequired,
        propsValues : PropTypes.objectOf( PropTypes.arrayOf( PropTypes.string )),
    }; 

    (...)

但是，当我尝试对有状态的子组件执行相同操作时，它根本不起作用。我不能使用相同的sintaxis，并且在评估类型时仍然无法收到道具。

class StatefulComponent extends React.Component {

    constructor( props ) {
        super( props );
        this.state = {
            anyAttribute : true,
            anotherAttribute : null,
        };
    }

    static propTypes = {
        anyProp : PropTypes.oneOf( this.props.propsValues.anyProp ).isRequired,
        propsValues : PropTypes.objectOf( PropTypes.arrayOf( PropTypes.string )),

    (...)

上面的代码段引发了一个错误，指出此未定义。我还尝试了其他可能性，但没有效果。

那么，关于如何在无状态组件中实现与我相同的结果的任何想法，能够使用props.propsValues作为我对子状态组件的所有道具的基础验证器？谢谢！

Answer 1

由于this.props是静态的，因此在使用propTypes时

propTypes不存在。

SFComponent是一种无法正常工作的hack，因为SFComponent.propTypes仅影响下一个组件的渲染。这应该通过HOC完成：

const withAnyProp = Comp => ({ anyProp, ...props }) =>
  const Wrapper = (...props) => <Comp ...props/>;
  Wrapper.propTypes = {
    anyProp : PropTypes.oneOf(anyProp).isRequired,
  };
  return <Wrapper ...props>;
};
const SFComponentWithAnyProp = withAnyProp(SFComponent);

Orop类型仅是 static 类型检查的内置替代品。最好改用TypeScript或Flow类型。

如果需要使用 dynamic 类型检查，可以在功能组件主体或类组件挂钩方法中直接声明props。

通过props将PropTypes值传递给有状态的React子组件

1 个答案: