Javascript 如果出现其他情况，则作出反应

我是新手。我在下面的代码中给出了一个语法错误。谁能帮我一下吗

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

});

import React，{PropTypes}来自'React'；
从“不可控”导入不可控；
从“react css模块”导入css模块；
从“类名称”导入cn；
从“/Tab.scss”导入样式；
导出常量选项卡=（{title，isActive，children}）=>(
如果（isActive）{
{title}
}否则{
{title}
}
);
Tab.propTypes={
isActive:PropTypes.bool，
孩子们：任何人，
标题：PropTypes.any，
};
导出默认不可控（CSSModules（选项卡，样式，{allowMultiple:true}）{
});

以下是错误

./src/components/Tab/Tab.jsx中出错 模块生成失败：语法错误：意外令牌（10:4）

8|
9 |导出常量选项卡=（{title，isActive，children}）=>(
>10 |如果（isActive）{
|     ^
11 |{title}
12 |}其他{
13 |{title}

---

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

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

考虑到您的条件有多简单，我只需使用一个三元运算符，并将其直接放在

styleName

声明中，如下所示：

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

{title}

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

考虑到您的条件有多简单，我只需使用一个三元运算符，并将其直接放在

styleName

声明中，如下所示：

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

{title}

在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>);
  }
};

export const Tab=（{title，isActive，children}）=>{
如果（isActive）{
返回（{title}）；
}否则{
返回（{title}）；
}
};

---

查看有关使用箭头函数的更多信息。

在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>);
  }
};

export const Tab=（{title，isActive，children}）=>{
如果（isActive）{
返回（{title}）；
}否则{
返回（{title}）；
}
};

---

查看有关使用箭头函数的更多信息。

首先让我指出错误

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

在ur代码中，因为

if else

是一个代码块，而不是一个您应该使用的表达式

速记

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

const fn=（{title，isActive，children}）=>(
{title}
);

正规的

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

const fn=（{title，isActive，children}）=>{
如果（isActive）{
返回{title}；
}否则{
返回{title}；
}
}

这是最好的办法

要处理条件类，请使用库。您可以使代码非常可读。它甚至在

React.addons.classSet现已弃用。此功能可以 替换为几个免费提供的模块。是这样一个吗 模块

从“classnames”导入cn；
常量fn=（{title，isActive，children}）=>(
{title}；
);

首先让我指出错误

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

在ur代码中，因为

if else

是一个代码块，而不是一个您应该使用的表达式

速记

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

const fn=（{title，isActive，children}）=>(
{title}
);

正规的

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

const fn=（{title，isActive，children}）=>{
如果（isActive）{
返回{title}；
}否则{
返回{title}；
}
}

这是最好的办法

要处理条件类，请使用库。您可以使代码非常可读。它甚至在

React.addons.classSet现已弃用。此功能可以 替换为几个免费提供的模块。是这样一个吗 模块

从“classnames”导入cn；
常量fn=（{title，isActive，children}）=>(
{title}；
);