Extraindo e Substituindo Texto em JSX
Experimental: Isso pode não lidar bem com todos os casos.
É principalmente adequado para extrair texto de componentes JSX que contêm texto estático. Se o conteúdo do texto for dinâmico (usando chaves {}), pode não ser tratado corretamente.
Esta ferramenta se concentra em extrair texto encontrado dentro de tags JSX, gerando um array composto por essas strings extraídas. Depois, permite que você substitua o texto atual no JSX pelas strings deste array.
Você pode usar essa funcionalidade de forma conveniente para uma variedade de aplicações, incluindo testes de UI/UX, suporte a múltiplas línguas e localização, otimização para SEO, realização de avaliações de acessibilidade e criação de documentação ou comentários para seu código.
Casos de Uso
- Testes de UI / UX
- Suporte Multilíngue e Localização
- Sistemas de Gestão de Conteúdo (CMS)
- Otimização para SEO
- Verificações de Acessibilidade
- Geração de Documentação / Comentários de Código
Instruções de Uso
- Por favor, insira a tag JSX contendo as strings que você deseja extrair no campo de entrada.
- Clique no botão de extração na parte inferior da tela.
- Você pode escolher se deseja extrair apenas ou realizar tanto a extração quanto a substituição usando as opções de botão ao lado do botão de extração.
- Para a opção de extrair e substituir, você pode especificar o nome do array que conterá os textos substituídos no campo de entrada na parte inferior da área de entrada. Ao chamar esse array em seu código, use o mesmo nome de variável, e ele será substituído de acordo, incluindo as chaves {}.
- Verifique o campo de saída para o array / JSX e copie conforme necessário usando o botão de copiar para uso gratuito.
Exemplo de Uso
Input JSX Tag:
<div>
<Button onClick={onPlayMovie}>
Play Movie
</Button>
<Button onClick={onUploadImage}>
Upload Image
</Button>
</div>
Output Array Name:
array
Output Array:
["Play Movie", "Upload Image"]
Output JSX:
<div>
<Button onClick={onPlayMovie}>
{array[0]}
</Button>
<Button onClick={onUploadImage}>
{array[1]}
</Button>
</div>