反应 js if else 条件答案

【问题标题】：React js if else condition反应 js if else 条件
【发布时间】：2016-12-06 03:15:36
【问题描述】：

我是 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: Unexpected token (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

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

至于为什么这不起作用，我将遵从@user1200514 给出的explanation，但简而言之，ES6 的速记箭头函数声明中不允许使用代码块。

鉴于您的条件非常简单，我只需使用三元运算符并将其直接放在您的 styleName 声明中，如下所示：

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

【讨论】：

【解决方案2】：

首先让我指出错误

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 现已弃用。这个功能可以替换为几个免费可用的模块。 classnames 就是这样一种模块。

    import cn from 'classnames';

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

【讨论】：

【解决方案3】：

在 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 了解有关使用箭头函数的更多信息。

【讨论】：