4
respostas

className não funcionou

Estava acompanhando a vídeo-aula "Importando CSS" do "React" e aplicando as modificações sugeridas. Quando substitui o HTML inicial pelo HTML do pure-css, ocorreram os problemas com os comentários como no vídeo. Mas assim que corrigi os problemas de comentários, o pure-css funcionou perfeitamente e achei estranho. pois no HTML original figura "class" e não "className". Bem, mesmo assim fiz as substituições de "class" por "className" e descobri que funciona com "class" ou "className" indiferentemente. Deixei com "class" porque achei mais fácil de lembrar. Certamente é algum acerto em uma versão mais nova do REACT, não?

4 respostas

Oi Sergio, realmente bem estranho. Achei essa issue aqui antiga => https://github.com/facebookincubator/create-react-app/issues/626 que um usuário pede justamente por isso.

Não aparece nenhum warning no seu código? talvez ele tenha apenas ignorado o atributo desconhecido. Se for possível, tem como postar seu código no github para eu dar uma olhada?

Olá, Alberto, Na realidade não é um problema pois o código está funcionando perfeitamente. Acho até que o título que coloquei está errado, pois o "className" também funciona. A estranheza é que também está funcionando com "class" ao invés de "className". Tem alguns warnings, sim, mas aparentemente não tem nada a ver com o "className". Aí vai:

Compiled with warnings.

./src/App.js
  Line 18:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash
  Line 21:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash
  Line 22:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash
  Line 23:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Andei mexendo (só mudei algumas variáveis pra ver como funcionam) no código original do vídeo mas basicamente é o mesmo da vídeo-aula. Meu código é o seguinte:

import React, { Component } from 'react';
//import logo from './logo.svg';
import './css/pure-min.css';
import './css/side-menu.css';

class Aplic extends Component {
  render() {
    return (
                <div id="layout">

                                <a href="#menu" id="menuLink" class="menu-link">

                                                <span></span>
                                </a>

                                <div id="menu">
                                                <div class="pure-menu">
                                                                <a class="pure-menu-heading" href="#">Company</a>

                                                                <ul class="pure-menu-list">
                                                                                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                                                                                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autor</a></li>
                                                                                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Livro</a></li>
                                                                </ul>
                                                </div>
                                </div>

                                <div id="main">
                                                <div class="header">
                                                                <h1>Principal</h1>
                                                </div>

                                </div>
                </div>
    );
  }
}

export default Aplic;

No meu caso também está funcionando com 'class' ou 'className' e outra mudança que notei é que o uso do 'export default App' pode ser omitido sem problemas, acredito que sejam melhorias das versões mais recentes do react. =]

Mesma coisa comigo. Deve ser uma melhoria das versões mais recentes mesmo. Mas ainda vou esperar uma resposta do professor pra ter total certeza, pq isso tbm pode ser questão de padronização de projeto.