React - 如何在三元运算符中包含动态变量

Question

在JSX中，如何使用三元运算符包含动态变量？下面的JSX给出了意外的令牌错误，但是如果我用文字{x.title}替换R就行了。

let cardIDs = this.props.cards.map(x => <li key={x.title}>
{this.state.showName ? {x.title} : "S"}
</li>);

Answer 1

删除{}

{ this.state.showName ? x.title : "S" }
                       ^^     ^^