React Context-对多个组件使用上下文提供程序

Question

我是React的新手，我正在学习一个教程，我打算尝试使用上下文API进行学习。我遇到了一种情况，我必须将上下文传递给多个元素。我做了以下事情，并且想知道它是否是正确/良好/推荐的设计。如果不是这样，有什么更好的选择？

const rootElement = document.getElementById("root");

ReactDOM.render(
  <React.StrictMode>
    <TweetsProvider>
      {createElement(App, rootElement.dataset)}
     </TweetsProvider>
  </React.StrictMode>,
  rootElement
);


const tweetDetailElements = document.querySelectorAll(".tweet-detail");

// Map over tweet elements
tweetDetailElements.forEach((element) => {
  ReactDOM.render(
    <React.StrictMode>
      <TweetsProvider>
        {createElement(TweetDetail, element.dataset)}
      </TweetsProvider>
    </React.StrictMode>,
    element
  );
});

我的TweetsProvider上下文提供程序提供了一个值tweets，该值在Tweet组件中使用，该组件是App和{{1}的子元素}元素，这就是为什么我使用了上面的结构。