An additional `div` markup is wrapped around each router component by `withQuicklink` HOC · GoogleChromeLabs/quicklink#193

(1 留言) (1 反應) (0 負責人)JavaScript (10,861 star) (431 fork)batch import

help wanted

描述

Describe the bug As you can see in the HOC, we have an additional div markup wrapping around the Component (probably it would be a route component) so inserting that div markup could break the app styling since the app styling does not expect another div to be inserted by withQuicklink HOC. Capture

To Reproduce If we use nest CSS selector without considering that div, we might break the styling.

Expected behavior I hope we could avoid adding any wrapping markup around a route component if possible. At least, I hope we manage to avoid impacting the rest of the app as well as the styling in any case.

Version:

Quicklink 2.0

cc @addyosmani @demianrenzulli

貢獻者指南

技術棧: javascriptreact
領域: frontend
議題類型: bug
難度: 2
預計時間: 1-3 hours
活動狀態: stale
清晰度: clear
前置要求: React basicsUnderstanding of HOCs
新手友善度: 60
研究方向: Look at the withQuicklink HOC in the source code (likely in src/quicklink.js or similar). Identify where the extra div is wrapped around the component. Consider using React.Fragment or simply returning the component directly. Ensure that removing the div does not break the prefetching logic or the expected behavior of quicklink. Check if there are existing tests for withQuicklink and update them accordingly. Also verify that the styling of any demo or example app is unaffected.