reactjs - 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)}