Блог

Главная - Вопросы по программированию - Как визуализировать компонент с использованием логических значений состояния в redux в react?

Как визуализировать компонент с использованием логических значений состояния в redux в react?

#javascript #html #reactjs #redux #react-redux

Вопрос:

Я работаю над приложением react, в котором у меня есть 3 логические переменные в магазине redux, и я хочу переключаться между 3 компонентами для визуализации с использованием этих логических значений.Как я могу это сделать?

Вот мой код:

 <Grid>
    <Grid.Row>
        <Grid.Column width={1} />
        <Grid.Column width={14}>
            this.props.openCreateForm?<Form/>:</>
            this.props.openViewPopup?<ViewPopup/>:</>
            this.props.openCredsPopup?<CredsPopup/>:</>
        </Grid.Column>             
        <Grid.Column width={1} />
    </Grid.Row>
</Grid>

Внутри Grid.Column я хочу отобразить только 1 из этих трех компонентов.Все логические значения находятся в состоянии redux.

Error 

 react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Как я могу это сделать?Я получаю ошибку по этому поводу

Спасибо

Комментарии:

1. Какую ошибку вы получаете?

2. Как вы получаете свое состояние от redux? крючки или подключенные компоненты?

3. Я использую mapStatetoProps для получения значений

4. так и должно быть {this.props.openCreateForm?<Form/>:</>} . была ли это опечатка, о которой идет речь?

5. Когда вы используете синтаксис JSX , компилятору потребуется, чтобы встроенный код JavaScript был заключен в { }

Ответ №1:

Вам нужно заключить их в { }

 const { openCreateForm, openViewPopup, openCredsPopup } = this.props

           <Grid.Column width={14}>
             { openCreateForm ? <Form/> : 
               openViewPopup ? <ViewPopup/> :
               openCredsPopup ? <CredsPopup/> : </> }
           </Grid.Column>

или, если вам не нужна вложенная троичная,

            <Grid.Column width={14}>
             { this.props.openCreateForm amp;amp; <Form/> ||
               this.props.openViewPopup amp;amp; <ViewPopup/> ||
               this.props.openCredsPopup amp;amp; <CredsPopup/> || </> }
           </Grid.Column>

Ответ №2:

 const { openCreateForm, openViewPopup, openCredsPopup } = this.props

        <Grid>
        <Grid.Row>
            <Grid.Column width={1} />
            <Grid.Column width={14}>
                {openCreateForm amp;amp; <Form/>}
                {openViewPopup amp;amp; <ViewPopup/>}
                {openCredsPopup amp;amp; <CredsPopup/>}
            </Grid.Column>             
            <Grid.Column width={1} />
        </Grid.Row>
    </Grid>

Используйте деструктуризацию, чтобы получить значение реквизита, и используйте оператор amp;amp; для условного рендеринга. Это работает, потому что в JavaScript значение true amp;amp; expression всегда равно выражению, а значение false amp;amp; expression всегда равно false.

См. здесь: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical—operator

Метки: