我怎樣才能避免React/JSX Pyramid的厄運？

“清理”所謂的末日金字塔對性能沒有任何好處。有多個層次是完全好的。

在實現下面的代碼之前，請確保不要僅僅因為可以就在全局級別提供上下文。上下文提供程序必須包裝在使用它的組件附近，這意味著不總是在根級別。

也就是說，這里有一個簡單的高階組件，它可以包裝多個提供者以提供Reduxcompose式API。

/**
 * Check if the object has a property matching the key
 * NOTE: Works only for shallow objects.
 * @param object
 * @param key
 * @returns {boolean|boolean}
 */
const hasProperty = (object, key) =>
  object ? Object.hasOwnProperty.call(object, key) : false;
const hasProps = (arg) =>
  hasProperty(arg, 'provider') && hasProperty(arg, 'props');

export const withContextProviders = (...providers) => (Component) => (props) =>
  providers.reduceRight((acc, prov) => {
    let Provider = prov;
    if (hasProps(prov)) {
      Provider = prov.context;
      const providerProps = prov.props;
      return <Provider {...providerProps}>{acc}</Provider>;
    }
    return <Provider>{acc}</Provider>;
  }, <Component {...props} />);

Usage:

const Component = () => {...}
export withContextProviders(ThemeProvider, I8nProvider)(Component)
// OR
export withContextProviders({provider: ThemeProvider, props: {darkMode: true}}, I8nProvider)(Component)
// OR
export withContextProviders(ThemeProvider, {provider: I8nProvider, props: {lang: 'en'}})(Component)
// OR
const providers = [{provider: ThemeProvider, props: {darkMode: true}}, {provider: I8nProvider, props: {lang: 'en'}}]
export withContextProviders(...providers)(Component)

注意：這并不構成單例，也就是說，如果兩個組件用這個HoC包裝，它們都將獲得自己的context實例。對于這種情況，建議在根級別用provider包裝組件

再說一次，有多個層次是完全好的。