Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#525 1 comentário 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
68/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
javascript, react, react-native
Domínio
frontend, mobile

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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;
}
Linguagem predominante
JavaScript
Estrelas
3.6k
Forks
208
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react/react-strict-dom

Todas as issues de react/react-strict-dom

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.