TypeScript JSX 表达式中的逗号运算符

Question

这个组件中的表达式

const App = props => (<div>{console.log(props), JSON.stringify(props)}</div>);

结果

error TS1005: '}' expected

围绕逗号运算符的错误。这可以在这个 Stackblitz demo 中看到，它是 create-react-app 使用 TypeScript 作为转译器的项目。

逗号运算符 works as intended in Babel 情况类似。

是 TypeScript 还是 Babel JSX 实现出错了？ JSX 规范说了什么？这是一个已知问题吗？如果这是 TypeScript 的错，可以修复吗？

Answer 1

可以使带有逗号运算符的表达式在带有额外括号的 TypeScript 和 Babel JSX 实现中按预期工作：

{(console.log(props), JSON.stringify(props))}

或者如果是console.log调用总是falsy，可以用逻辑或短路：

{console.log(props) || JSON.stringify(props)}

Comma operator in TypeScript JSX expressions