刷新来自 index.js 的 webfont 加载回调的子组件

Question

问题：

不同的字体在包含该字体的元素上需要稍微不同的样式。该组件的样式是在 JS 中计算的。当 webfont 加载字体并在 DOM 中更改它时，我的组件没有被刷新。我想使用 Webfontloader 回调来强制重新加载此组件。 Webfont 配置在顶层指定 - index.js（在 App.js 之上）：

// webfontloader configuration object. *REQUIRED*.
const config = {
  google: {
    families: ['Roboto:500']
  },
  custom: {
    families: ["Reef", "Roboto Slab"],
    urls: fonts
  }
};

const callback = status => {
  console.log(status);
};

ReactDOM.render( 
<BrowserRouter >
  <WebfontLoader config = {config}
  onStatus = {callback} >
    <App / >
  </WebfontLoader>  
</BrowserRouter >,
  document.getElementById("root")
);

我如何以优雅的方式刷新该元素（不通过所有父元素传递道具太深）？

谢谢！

Answer 1

正如@Hinrich 提到的，解决方案是 Context API。在 webfont 加载时，我正在更新 App 状态并通过 Provider 将其传递给所有消费者，以便强制组件（消费者）重新呈现。

刷新来自 index.js 的 webfont 加载回调的子组件

Refreshing child component on webfont load callback from index.js

reactjs

webfont-loader