reactjs - 从 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 传递给所有消费者，以便强制组件（消费者）重新渲染。