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

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

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

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

Answer 2

首先让我指出错误

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

在你的代码中，因为def update @party = Party.find(party_params[:id]) if @party.update(party_params) redirect_to 'show' else render '_rsvp' end end是一个代码块而不是表达式，你应该使用

速记
```
if else
```

正

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

走向最佳方式

要处理条件类，请使用classnames库。你可以让你的代码非常易读。它甚至在react docs

现在不推荐使用React.addons.classSet。这个功能可以替换为几个免费提供的模块。 classnames就是其中之一模块。

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

Answer 3

在ES2015中，写一些类似

的内容

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

与

相同

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

基本上，您尝试在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。

如果其他条件，则反应js

3 个答案: