React js if else condition

Question

Я новичок в React js. Я дал синтаксическую ошибку в следующем коде. Может ли кто-нибудь помочь мне в этом, пожалуйста.

import React, { PropTypes } from 'react'; 
import uncontrollable from 'uncontrollable'; 
import CSSModules from 'react-css-modules'; 
import cn from 'classnames'; 
import styles from './Tab.scss'; 

export const Tab = ({title, isActive, children}) => (
    if(isActive){ 
     <div styleName='tab active' >{title}</div> 
    }else{ 
     <div styleName='tab ' >{title}</div> 
    } 
); 

Tab.propTypes = { 
    isActive: PropTypes.bool, 
    children: PropTypes.any, 
    title: PropTypes.any, 
}; 

export default uncontrollable(CSSModules(Tab, styles, {allowMultiple: true}), { 

}); 

Ниже приведена ошибка.

ОШИБКА в ./src/components/Tab/Tab.jsx модуля сборке не удалась: SyntaxError: Неожиданный маркер (10: 4)

8 | 
    9 | export const Tab = ({title, isActive, children}) => (
> 10 |  if(isActive){ 
    | ^
    11 |   <div styleName='tab active' >{title}</div> 
    12 |  }else{ 
    13 |   <div styleName='tab ' >{title}</div> 

@ ./src/components/Tab/index.js 7: 11-27

Answer 1

Относительно того, почему это не сработает, я буду отсрочен до explanation, заданного пользователем @ user1200514, но, короче говоря, в условных обозначениях функций сокращения стрелок ES6 не допускаются.

Учитывая то, как просто ваша условная, я бы просто использовать тройной оператор и поместить его непосредственно внутри styleName декларации, так:

<div styleName={isActive ? 'tab active' : 'tab'}>{title}</div> 

Answer 2

В ES2015, писать что-то вроде

const fn = (arg1, arg2) => (
    'abc'; 
); 

является то же, что и

const fn = (arg1, arg2) => { 
    return 'abc'; 
}; 

В принципе, вы пытаетесь добавить a if внутри инструкции return.

Изменить это следующим образом, и он должен работать:

export const Tab = ({title, isActive, children}) => { 
    if(isActive){ 
    return (<div styleName='tab active' >{title}</div>); 
    } else { 
    return (<div styleName='tab ' >{title}</div>); 
    } 
}; 

Посмотрите https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions для получения дополнительной информации об использовании функций стрелок.

Answer 3

Прежде всего позвольте мне указать на ошибку

JSX позволяет любые JavaScript выражения. Ошибка вашего кода в том, что у вас есть ошибка в функции стрелки. Синтаксис функции стрелка позволяет двум Синтаксисы

в Уре код, поскольку if else является блок кода, а не выражение, которое вы должны либо пойти с

1. Shorthand

   const fn = ({title, isActive, children}) => (
       <div styleName={isActive ? 'tab active' : 'tab'}>{title}</div> 
   ); 
   

2. Regular

   const fn = ({title, isActive, children}) => { 
       if (isActive) { 
       return <div styleName='tab active' >{title}</div>; 
       } else { 
       return <div styleName='tab' >{title}</div>; 
       } 
   } 
   

Перейти к лучшему способу сделать это

Для обработки условных классов используйте библиотеку classnames. u может сделать ваш код очень читаемым. его даже есть упоминание в react docs

React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.

import cn from 'classnames'; 

    const fn = ({title, isActive, children}) => (
     <div styleName={cn('tab', { 'active': isActive })}>{title}</div>; 
    );