Как изменить имя по умолчанию для функции connect-redux connect? - PullRequest
Новая
       26

Как изменить имя по умолчанию для функции connect-redux connect?

1 голос
/ 22 марта 2019

Я использую onsen-ui для стилизации приложения meteor с React для внешнего интерфейса.Насколько я понимаю, onsen-ui управляет навигацией по pushing страницам в стек, где каждая страница имеет уникальный идентификатор.

Вот как мои страницы загружаются в App.js

loadPage = (page) => {
    const currentPage = this.navigator.pages.slice(-1)[0]

    if(currentPage.key != page.name){
        this.navigator.pushPage(
            {
                component: page,
                props: { key: page.name }
            },
            {
                animation: 'fade',
                animationOptions: {duration: 0.3, timing: 'ease-in'}
            },
        );
    }
}

Пока все отлично работает.Но теперь я включил redux в свой проект, поэтому у меня есть некоторые компоненты, которые подключены к хранилищу с помощью функции react-redux connect().

Проблема в том, что для каждого компонента, который connect wraps, свойство name становится Connect, поэтому onsen-ui приходится иметь дело с несколькими страницами с одним и тем же именем в его стеке.

В качестве примера, скажем, у меня есть компонент, определенный ниже 

const ComponentName = props => {
    return (
        <p>Test component</p>
    )
}

export default connect()(ComponentName)

обычно ComponentName.name возвращает ComponentName, но после переноса с connect, ComponentName.name возвращает Connect

Можно ли вообще изменить значение имени дляобернутый компонент?

Любые предложения приветствуются.

Редактировать: Следуя указаниям Влатко, именно так я в конце концов решил проблему. 

export const getPageKey = (page) => {
    // returns a page key
    let key;
    if (page.name === 'Connect') {
        key = page.displayName
        // key = page.WrappedComponent.name
        // react-redux connect returns a name Connect
        // .displayName returns a name of form Connect(ComponentName)
        return key.replace('(', '').replace(')', '')
    }
    else {
        key = page.name
        return key
    }
}

Так что для каждого компонента я простополучить ключ с помощью getPageKey(ComponentName)

Редактировать 2. Этот подход не работает в производственном процессе.

В производственном режиме я получаю отдельные буквы для page.displayName, и эти буквы едва ли уникальны,а это значит, что я вернулся туда, откуда начал.

Мне нужно найти другой подход.Я обновлю все, что найду.

Ответы [ 2 ]

2 голосов
/ 22 марта 2019

Это происходит потому, что вы экспортируете свой компонент с помощью функции более высокого порядка (Connect), которая по сути является закрытием в JavaScript.

Имя используемого вами HOC - Connect, и оно возвращается.

Однако возможно получить имя компонента, переданного в соединение HOC. 

ComponentName.name // Connect
ComponentName.displayName // Connect(ComponentName)
ComponentName.WrappedComponent.name // ComponentName
0 голосов
/ 22 марта 2019

Я не знаком с onsen-ui, и похоже, что Vlatko вас охватил, но не могли бы вы также дать имя новому подключенному компоненту? Например: 

const ComponentName = props => {
    return (
        <p>Test component</p>
    )
}

const ConnectedComponentName = connect()(ComponentName)

export default ConnectedComponentName;

Тогда, надеюсь, вы сможете получить доступ к уникальному ConnectedComponentName

...