为什么这里使用花括号会失败呢
来源：9-2 内联样式中的表达式
ApOLO
2018-02-15
我看了官方文档中, 条件渲染的部分, 是使用花括号 { } 来包围条件渲染的语句. 但是在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>
写回答
2回答
-
兔子不打地鼠打代码
2018-02-28
在JSX语法中才遇到花括号{}，用js来渲染，遇到( )用html来渲染。
return（）括号里的内容才用JSX语法。
另外你的三元表达式中的括号是在中文状态下输入的，改为英文状态下的括号就没有问题了~
022018-03-05 -
Parry
2018-02-16
同学，可以贴一下你的测试代码吗？
00
相似问题