为什么这里使用花括号会失败呢

Question

我看了官方文档中, 条件渲染的部分, 是使用花括号 { } 来包围条件渲染的语句. 但是在9-2 内联样式表达式这里, 如果使用花括号包围条件语句, 就会报错. 理解不能, 求解释!

这里是在内联样式中使用条件语句的示例:

 render() {

        const styleComponentHeader = {

            header: {

                backgroundColor: 'grey',

                color: 'white',

                paddingTop: this.state.miniHeader ? '3px' : '15px',

                paddingBottom: (this.state.miniHeader) ? '3px' : '15px'

            }

        }

这是官方文档中条件渲染的示例:

   <div>

      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.

    </div>

Answer 1

兔子不打地鼠打代码 2018-02-28 19:34:56

在JSX语法中才遇到花括号{}，用js来渲染，遇到( )用html来渲染。

return（）括号里的内容才用JSX语法。

另外你的三元表达式中的括号是在中文状态下输入的，改为英文状态下的括号就没有问题了~

• 提问者 ApOLO #1

  在 render() 函数的语句中使用括号 "()" 包围JSX, 是为了提高代码的可读性, 即使不使用括号, 也是允许的.
  
  花括号是用于在 JSX 语句中使用 js 对象.
  
  另外我的标点都是英文标点啊.  /(ㄒoㄒ)/~~

• 兔子不打地鼠打代码 回复 提问者 ApOLO #2

  这样啊，我之前也遇到和你一样的问题，但是发现是中英文输入上的错误，解决了之后就没有问题了欸

Answer 2

Parry 2018-02-16 20:43:49

同学，可以贴一下你的测试代码吗？