Я новичок в 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
, так и в TweetDetail
элемент, поэтому я использовал приведенную выше структуру.