Nidhin Kumar em Level Up Your Code Seguir 13 de jul · 3 min ler
visão global
React Tree graph é um componente que renderiza dados como uma árvore usando SVG
Objetivos
- Instalando o componente Gráfico de Árvore de Reação
- Customizando o Gráfico de Árvores
- Eventos de clique do gráfico de árvore
- Adereços do Caminho Personalizado
- Animação vista de árvore
Criação de Projetos
Vamos começar criando um aplicativo React usando o comando abaixo
criar-reagir-aplicativo vista de árvore
vista de árvore de cd
npm start
Se você gostaria de usar o TypeScript para o seu aplicativo React, use o comando abaixo
criar-reagir-app tree-view --typescript
vista de árvore de cd
npm start
1. Instalando o Componente React Tree Graph
Agora vamos instalar o componente react-tree-graph usando o comando abaixo
npm instalar react-tree-graph --save
Se você estiver usando o TypeScript, precisará adicionar os tipos para o componente. infelizmente, o react-tree-graph não tem os tipos para instalar, então precisamos declarar um módulo como abaixo
Crie uma nova pasta chamada types em src->types e crie um novo arquivo chamado AllTypes.d.ts e adicione o código abaixo.
declarar módulo 'react-tree-graph';
clique em Salvar e vá para tsconfig.json e adicione o código abaixo nas opções do compilador
"typeRoots": ["./src/types"]
Ainda confuso onde adicionar dê uma olhada
{
"compiladorOptions": {
.......
"typeRoots": ["./src/types"]
}
....
}
Agora vamos adicionar os códigos no App.tsx . Primeiro, substitua os códigos padrão disponíveis no App.tsx pelo código abaixo
clique em Salvar e execute o projeto usando o comando npm start e sua saída será como abaixo
2. Personalizando o Gráfico de Árvores
Agora vamos personalizar o gráfico de árvores adicionando mais dados e cores personalizadas para os caminhos
Crie um arquivo chamado data.ts e adicione o código abaixo
Em App.tsx substitua os códigos antigos pelo novo, como abaixo
Substitua App.css / crie novos estilos e adicione o código abaixo
Agora execute o projeto que sua saída será como abaixo
Agora vamos personalizar o gráfico em árvore mostrando o texto abaixo para o nó pai Color e aumentar o tamanho do ícone usando nodeRadius
Em data.ts adicionar textProps: {x: -25, y: 25} para todos os nós e filhos e no App.tsx adicionar os adereços para o componente Árvore como abaixo
Agora execute o projeto e você poderá ver a saída como abaixo
3. Eventos de clique do gráfico de árvore
Se quisermos fazer alguma operação enquanto gProps em um filho na árvore, podemos fazê-lo usando o gProps handleClick como abaixo
E sua saída é como
4. adereços caminho personalizado
Se você gostaria de ter estilos personalizados para seus caminhos, você pode fazê-lo usando o caminho props, definindo o nome da classe e passando o valor e em CSS, defina o nome da classe como abaixo.
E em data.ts add, uma nova propriedade chamada pathProps e define um className em pathprops como abaixo
pathProps: {className: 'red'}
clique em Salvar e execute o projeto. Sua saída será como
Gráfico da árvore 5.Animated
Se você quiser que seu gráfico de árvore com animação simplesmente adicione animated no componente <Árvore />.
clique em Salvar e execute o projeto, você verá a animação como abaixo
Parabéns, você criou o gráfico de árvore para reagir com estilos e animações personalizados. Explore mais com o plugin. Codificação feliz 🙂