Можете ли вы использовать синтаксис псевдонима импорта es6 для React Components?

Я пытаюсь сделать что-то вроде следующего, но он возвращает null:

import { Button as styledButton } from 'component-library'

затем попытаться сделать это как:

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>
        )
    }
}

Причина в том, что мне нужно импортировать компонент Button из библиотеки, а также экспортировать компонент-оболочку с тем же именем, но сохранить функциональность импортированного компонента. Если я оставлю его при import { Button } from component library то, конечно, я получаю ошибку с несколькими объявлениями.

Есть идеи?

Ответы

Ответ 1

Ваш синтаксис действителен. JSX является синтаксическим сахаром для React.createElement(type), так как тип является допустимым типом React, его можно использовать в тегах JSX. Если кнопка имеет значение null, ваш импорт неверен. Возможно, Button - это экспорт по умолчанию из библиотеки компонентов. Пытаться:

import {default as StyledButton} from "component-library";

Другая возможность заключается в том, что ваша библиотека использует экспорт module.exports = foo т.е. module.exports = foo. В этом случае вы можете импортировать вот так:

import * as componentLibrary from "component-library";

Ответ 2

Попробуйте импортировать таким образом

import {default as StyledLibrary} from 'component-library';

Я полагаю, вы экспортируете

export default StyledLibrary

Ответ 3

Не знаю, почему я не могу использовать этот импорт;

Как работа, я закончил это:

import React, { PropTypes } from "react";
import * as StyledLibrary from 'component-library';

export default class Button extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <StyledLibrary.Button {...this.props}></StyledLibrary.Button>
        )
    }
}

Спасибо всем

Ответ 4

Пользовательские компоненты должны быть капитализированы
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

измените свой код на

import { Button as StyledButton } from 'component-library';
....bah...bah....bah  
<StyledButton {...this.props}></StyledButton>

Ответ 5

обратите внимание, что когда вы заглавили StyledLibrary, и это сработало

в то время как в исходном вопросе вы не использовали стиль Button, и он не работал

оба из них - ожидаемые результаты с React

поэтому вы не обнаружили обходного пути, вы просто обнаружили (документированный) способ реагирования на вещи

Ответ 6

Осторожнее с заглавными буквами. Лучше всего всегда CamelCase.

Один:

import Thing from "component";

Один с псевдонимом:

import {Thing as OtherThing} from "component";

Один с псевдонимом плюс другие значения по умолчанию:

import {Thing as OtherThing}, Stuff, Fluff from "component";

Более подробный пример

import
{Thing as StyledButton},
{Stuff as Stuffing},
{Fluff as Fluffy},
Wool,
Cotton
from "component";