Estoy tratando de hacer algo como lo siguiente, sin embargo, devuelve nulo:
import { Button as styledButton } from 'component-library'luego intentar representarlo como:
import React, { PropTypes } from "react"; import cx from 'classNames'; import { Button as styledButton } from 'component-library'; export default class Button extends React.Component { constructor(props){ super(props) } render() { return ( <styledButton {...this.props}></styledButton> ) } } El motivo es que necesito importar el componente Button de una biblioteca y también exportar un componente contenedor con el mismo nombre pero manteniendo la funcionalidad del componente importado. Si lo dejo en import { Button } from component library , por supuesto, obtengo un error de declaración múltiple.
¿Algunas ideas?
Su sintaxis es válida. JSX es azúcar de sintaxis para React.createElement (tipo), por lo que siempre que el tipo sea un tipo React válido, se puede usar en "etiquetas" JSX. Si Button es nulo, su importación no es correcta. Quizás Button es una exportación predeterminada de la biblioteca de componentes. Tratar:
import {default as StyledButton} from "component-library"; La otra posibilidad es que su biblioteca esté usando exportaciones commonjs, es decir module.exports = foo . En este caso puedes importar así:
import * as componentLibrary from "component-library";Dado que esta es una respuesta popular, aquí algunos datos más:
export default Button -> import Button from './button' const Button = require('./button').default export const Button -> import { Button } from './button' const { Button } = require('./button') export { Button } -> import { Button } from './button' const { Button } = require('./button') module.exports.Button -> import { Button } from './button' const { Button } = require('./button') module.exports.Button = Button -> import { Button } from './button' const { Button } = require('./button') module.exports = Button -> import * as Button from './button' const Button = require('./button')Intenta importar de esta manera
import {default as StyledLibrary} from 'component-library';Supongo que exportas
export default StyledLibraryCuidado con las mayúsculas. Mejor siempre CamelCase.
Uno:
import Thing from "component";Uno con alias:
import {Thing as OtherThing} from "component";Uno con alias más otros valores predeterminados:
import {Thing as OtherThing}, Stuff, Fluff from "component";Ejemplo más detallado
import {Thing as StyledButton}, {Stuff as Stuffing}, {Fluff as Fluffy}, Wool, Cotton from "component";