Documentation error in the Render Props - Needs Interpolation
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
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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