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

回答

相關問題