10

Criei um projeto para estudar react e estou tentando desacoplar o meu Header do app criando um componente para ele. Criei um arquivo Header.jsx e passei o código para lá mas estou recebendo o seguinte erro:

Failed propType: Invalid prop children supplied to Router. Check the render method of Header.

Header.jsx

import React, { Component, PropTypes } from 'react';
import Link from 'react-router';
import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

const activeClassName = 'active';

class Header extends Component{
  render() {
    <div>
      <Header title="React SaaS" scroll>
        <Navigation>
          <Link activeClassName={activeClassName} to="/home">Home</Link>
          <Link activeClassName={activeClassName} to="/login">Login</Link>
        </Navigation>
      </Header>
      <Drawer title="React SaaS">
        <Navigation>
          <Link to="/home">Home</Link>
          <Link to="/login">Login</Link>
        </Navigation>
      </Drawer>
    </div>
  }
};

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]),
};

export default Header;

app.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import Router from 'react-router';
import { IndexRoute, Link, Route } from 'react-router';
import ReactMDL from 'react-mdl';
import { Layout , Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

import Header from './components/Header.jsx';
import Login from './components/Login.jsx';
import Home from './components/Home.jsx';

class App extends React.Component{
  render() {
    return (
      <div className="big-content" style={{height: '300px', position: 'relative'}}>
        <Layout>
          <Header />
          <div className="wrapper">
              {this.props.children}
          </div>
        </Layout>
      </div>
    )   ;
  }
};

let routes = (
  <Route path="/" component={App}>
    <Route path="home" component={Home}/>
    <Route path="login" component={Login}/>
  </Route>
);

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'))

Alguma ideia do que está acontecendo?

4
  • Conseguiu resolver
    – durtto
    Commented 13/01/2016 às 11:25
  • O problema ainda não foi resolvido. Por necessidades do sistema eu precisei alterar esse componente inteiro e ele acabou funcionando, mas vou deixar a pergunta aberta para que, caso alguém saiba a resposta deste caso específico, sua solução ajude a comunidade.
    – jpklzm
    Commented 3/05/2016 às 18:32
  • 3
    Ao que parece o seu component Header tem o render mas não tem um return () dentro do render.. o render obrigatoriamente tem que ter um return Commented 13/05/2016 às 13:29
  • Verdade @GuilhermeLouro, não tinha notado isso na época.
    – jpklzm
    Commented 19/05/2016 às 20:21

1 Resposta 1

1

Dois problemas que notei no component Header

Você realiza o import do Header do react-mdl como HeaderMDL

import { Header as HeaderMDL, Drawer, Navigation } from 'react-mdl';

Depois disso você define seu componente de Header.

class Header extends Component

Porém, dentro do componente Header que você está definindo você chama chama o Header do react-mdl como Header novamente, fazendo confusão com a definição que acabou de fazer. Nesse momento você deveria chamar HeaderMDL pois definiu que ele seria importado assim.

render() {
return (
  <div className="big-content" style={{height: '300px', position: 'relative'}}>
    <Layout>
      <Header /> /* Mudar aqui para HeaderMDL */
      <div className="wrapper">
          {this.props.children}
      </div>
    </Layout>
  </div>
)   ;

Além disso você não precisa validar a propType childreen porque não utiliza em nada no Header.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .