Estoy sorprendido por este problema que estoy teniendo en este momento. Toda mi lógica literalmente se detuvo. Algo comenzó a no funcionar, sin que yo haya cambiado nada. Quiero decir que incluso lo tengo en producción, el código idéntico, pero localmente comenzó a no funcionar, de la nada. Incluso cuando vuelvo a las confirmaciones anteriores, que estoy 100% seguro de que estaba funcionando, no funciona.
Meteorito, Reacción, Ant-Design. ¡Por favor ayuda!
El error es: ReferenceError: Layout is not defined
El código es:
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;
class LayoutContainer extends React.Component {
render() {
const { match, children } = this.props;
const pathname = match.location.pathname;
return (
<Layout className="layout">
<Header style={{backgroundColor: '#fff'}}>
<Menu
selectedKeys={[pathname]}
mode="horizontal"
style={{ lineHeight: '64px', float: 'right' }}
>
<Menu.Item key={'/'}>
<Link to="/">Home</Link>
</Menu.Item>
<Menu.Item key={'/create-a-gathering'}>
<Link to="/create-a-gathering">Create</Link>
</Menu.Item>
</Menu>
<div className="logo" />
<Blaze template="loginButtons" />
</Header>
<Content style={{ marginTop: 20 }}>
{children}
</Content>
<Footer style={{ textAlign: 'center' }}>
</Footer>
</Layout>
)
}
}
export default LayoutContainer;
3 respuestas
Debería haber respondido esto hace mucho tiempo, pero aquí va:
Como Afaq Ahmed Khan señaló (eso también):
import { Layout, Menu } from 'antd/lib';
Es la respuesta.
Supongo que Babel en dos paquetes entra en conflicto entre sí y, por lo tanto, '/lib'
a la raíz '/'
alias no funciona.
Eso se puede resolver eliminando la carpeta de módulos de nodo y luego reconstruyendo todo el proyecto.
Este es un problema de antd informado aquí Error de referencia: diseño no definido
Una manera fácil de resolver esto es importando un diseño como este
import Layout from 'antd/lib/layout'
O también puede solucionarlo actualizando la versión antd a "^ 3.2.2" o superior
Preguntas relacionadas
Nuevas preguntas
reactjs
React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.