React js if else condition

我是React js的新手。我在下面的代码中给出了语法错误。任何人都可以帮我解决这个问题。React js if else condition

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

});

以下是错误。

ERROR在./src/components/Tab/Tab.jsx 模块构建失败：语法错误：意外的令牌（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

来源

2016-12-06 Janith Widarshana

至于为什么这不起作用，我会推迟到@ user1200514给出的explanation，但总之，在ES6的速记箭头函数声明中不允许使用代码块。

鉴于多么简单的条件是我只用一个三元运算符，并直接将其放置在styleName声明中像这样：

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

来源

2016-12-06 03:17:57

在ES2015，写东西像

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

是就像

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

基本上，你试图添加return声明中的if。

更改它，如下所示，它应该工作：

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有关使用箭头功能的详细信息。

来源

2016-12-06 03:43:00 user1200514

首先让我指出错误

JSX允许任何javascript表达式。代码中的错误是你在箭头函数中有错误。箭头功能语法允许两种语法

在我们的代码

因为if else是一个代码块，而不是表达你应利用

去速记

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

定期

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

即将到来的最佳途径

要处理条件类，请使用classnames库。你可以让你的代码非常可读。它甚至在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>; 
    );

得到了提

来源

2016-12-06 03:49:00

React js if else condition

回答

相关问题