`<html.div>Count: {count}</html.div>` children not rendered on native due to being an array, not a `string`

Offen
  • Stimmt etwas nicht?
#525 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
68/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
javascript, react, react-native
Bereich
frontend, mobile

Rechercherichtung

Start by locating the native implementation that wraps string children in TextString, then check its existing tests for view-backed elements such as html.div. Reproduce the difference between a template string and multiple primitive children on React Native. Done means both forms render “Count: 3” on native, with regression coverage for mixed string and numeric children.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Describe the issue

On native, view-backed RSD elements such as html.div render a single string child correctly, but text disappears when JSX interpolation produces multiple primitive children.

For example, the first element below renders Count: 3, while the second is empty:

const count = 3;

<html.div>{`Count: ${count}`}</html.div>
<html.div>Count: {count}</html.div>

The interpolated form produces children equivalent to ['Count: ', 3].

Expected behavior

Both elements should render Count: 3, matching normal React DOM behaviour.

Steps to reproduce
  1. Render the example above in a React Native application using React Strict DOM.
  2. Observe that the template-string example renders.
  3. Observe that the interpolated string/number example is empty.
Test case
import { html } from 'react-strict-dom';

export function Example() {
  const count = 3;

  return (
    <>
      <html.div>{`Count: ${count}`}</html.div>
      <html.div>Count: {count}</html.div>
    </>
  );
}
Additional comments

Reproduced with:

  • react-strict-dom 0.0.55
  • React Native 0.85.3

The native implementation appears to wrap children in TextString only when typeof children === 'string'. Interpolation produces an iterable containing a string and number, which is passed directly to the native View and is not rendered.

Suggested fix

Replace typeof children === 'string' with the following checks:

function getTextContent(children: React.Node): ?string {
  const nodes = React.Children.toArray(children);
  const isTextOnly =
    nodes.length > 0 &&
    nodes.every(
      (node) =>
        typeof node === 'string' ||
        typeof node === 'number' ||
        typeof node === 'bigint'
    );

  return isTextOnly
    ? nodes.map((node) => String(node)).join('')
    : null;
}
Vorherrschende Sprache
JavaScript
Sterne
3.6k
Forks
208
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react/react-strict-dom

Alle Issues in react/react-strict-dom

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

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