Если оператор не работает при передаче реквизита в функциональный компонент, используя Reactjs? - PullRequest
Новая
       8

Если оператор не работает при передаче реквизита в функциональный компонент, используя Reactjs?

1 голос
/ 11 марта 2020

Я только начал изучать React, и оператор if, который есть в моем функциональном компоненте (в ChooseInputType. js, показанном ниже), возвращает «ложь», даже если я ожидаю, что он вернется ». правда'. Мой упрощенный код ниже - кто-нибудь может определить проблему? Я хотел бы использовать крючки, а не классы, если это актуально!

Форма. js

import React from 'react';
import ChooseInputType from './ChooseInputType';

function App(){
    return(
        <ChooseInputType 
            type="select"
        ></ChooseInputType >
);
}

ChooseInputType. js 

function ChooseInputType({type}){
    if({type} ==='select'){
        return (<div>True: Type is {type} </div>);
    else{
        return (<div>False: Type is {type} </div>);
    }
}
export default ChooseInputType;

Как видно из формы. js выше, свойство type, передаваемое в компонент ChooseInputType, равно «select», и все же возвращаемый результат неправильно отображает следующее:

Результат 

False: Type is select

Этого не произойдет, если я создам переменную в ChooseInputType. js (как показано ниже), так что это должно быть что-то вроде того, как я передать свойство type компоненту ChooseInputType? 

    function ChooseInputType({type}){
    //I have removed the props part by creating a type variable here
        const type="select";
        if(type ==='select'){
            return (<div>True</div>);
        else{
            return (<div>False</div>);
        }
    }
    export default ChooseInputType;

Буду благодарен за любые указатели!

Большое спасибо,

Кат ie

Ответы [ 3 ]

2 голосов
/ 11 марта 2020

Проблема в строке ниже, где вы используете {type} для сравнения с 'select' 

if({type} ==='select')

это должно быть просто 

if(type ==='select')
1 голос
/ 11 марта 2020 
function ChooseInputType({type}){
    if({type} ==='select'){ // change {type} to type
        return (<div>True: Type is {type} </div>);
    else{
        return (<div>False: Type is {type} </div>);
    }
}
export default ChooseInputType;

Это не работает, потому что вы уже извлекли type из props в аргументе, и он больше не является объектом.

Вот хороший пост для чтения о разрушении объектов: https://medium.com/@pyrolistical / вложенные уничтожение того-объектов-9dabdd01a3b8

1 голос
/ 11 марта 2020

Не заключайте его в скобки после его разборки

Это само по себе должно работать. Фигурные скобки означают, что вы получаете значение ключа type от вашего объекта. вы не должны использовать скобки вокруг него, когда будете использовать его после, потому что это все равно что поместить его обратно в объект и {type: 'select'} !== 'select', но деконструированный тип равен 'select' 

    function ChooseInputType({type}){
        if(type ==='select'){
            return (<div>True</div>);
        else{
            return (<div>False</div>);
        }
    }
    export default ChooseInputType;
...