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

Question

此组件中的表达式

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

结果在

错误 TS1005："}"预期

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

虽然逗号运算符在类似情况下在 Babel 中按预期工作。

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

Answer 1

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

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

或者，如果是console.log总是假的调用，则可以使用逻辑或短路：

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