javascript - 高阶组件无法访问包装组件的默认属性

Question

我有一个像这样的 HOC:

export default function HOC(WrappedComponent) {
  return class extends Component {

    static propTypes = {
      i: PropTypes.number.isRequired
    };

    render() {
console.log(this.props);
      return <WrappedComponent
        {...this.props}/>;
    }
  };
}

我的包装组件如下所示:

WrappedComponent extends Component {
    static defaultProps = {
      i: 0
    };

    render() {
      return <div/>;
    }
  };

export default HOC(WrappedComponent);

在 HOC 的 console.log 中，i 未定义。然而，由其父级传递给 WrappedComponent 的 props 是在 HOC 中定义的。我该如何解决这个问题？

Answer 1

这是基于官方 React Higher-order Components 的示例文档:

class HOC extends React.Component {
  render() {
    return (<p>{this.props.defaultPropAsExtreFeature}</p>);
  }
};

function createHOCWithExtraFeatures(WrappedComponent) {
  return class extends React.Component {
    static defaultProps = {
      defaultPropAsExtreFeature: "You will be able to see me at HOC"
    };
    
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const ExtendedHoc = createHOCWithExtraFeatures(HOC);

ReactDOM.render(
  <ExtendedHoc />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

选项#2

您可以创建React.Component，而不是像这样扩展它:

class HOC extends React.Component {
  static defaultProps = {
    HOCDefaultValue: 'You will be able to see me as WrappedComponent property',
  };

  render() {
    return (<p>1</p>);
  }
};

// NOTE: WrappedComponent doesn't have any properties
// it inherit them from HOC
class WrappedComponent extends HOC {
  render() {
    return (<p>{this.props.HOCDefaultValue}</p>);
  }
}

ReactDOM.render(
  <WrappedComponent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

第一种方法的好处是，每次使用createHOCWithExtraFeatures时，您都在创建一个新组件，并且可以将其分配给某些const。