GoogleChromeLabs/quicklink

An additional `div` markup is wrapped around each router component by `withQuicklink` HOC

Open

Aperta il 2 lug 2020

Vedi su GitHub
 (1 commento) (1 reazione) (0 assegnatari)JavaScript (10.861 star) (431 fork)batch import
help wanted

Descrizione

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

Guida contributor

Tech stack
javascriptreact
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
React basicsUnderstanding of HOCs
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60
Direzione di ricerca
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.