reactjs / reactjs/react.dev

Documentation error in the Render Props - Needs Interpolation

Offen
#5,049 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

Hi Team,

I am trying to give a small correction in the documentation code of React under the topic Render Props.
This isn't such a big issue, but will definitely help newbies and must be addressed.

Under the Render Props concept in React documentation, in one of the examples, where a class component of Cat is created which returns an image, which is positioned absolutely. The position of that image is received through render props.

The received position coordinates are passed to the absolute positioned image. Now the problem is instead of using interpolation and adding units into it, the position coordinates values are directly given in the style object. Surprisingly the Img still moves respectively to the mouse pointer.

But I don't think giving the values without units is the right thing.
So, the below code should be changed from

From:
render() { const mouse = this.props.mouse; return ( <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} /> ); }
To:
render(){ const mouse = this.props.mouse; return ( <img src= './imgs/cat.jpg' style={{ left: ${mouse.x}px, top: ${mouse.y}px}} /> ) }

If my understanding is wrong, please correct me.

Much thanks!

Regards,
Hari prasad

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne beim Abschnitt Render Props der React-Dokumentation und überprüfe das Cat-Beispiel, das die Mauskoordinaten im Bildstil anzeigt. Überprüfe die Koordinatenformatierung anhand der umgebenden Dokumentation und des Verhaltens von React und aktualisiere anschließend das Beispiel, damit die dokumentierte Positionierung korrekt und konsistent ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.