條件語句在TSX-文件（陣營+打字稿）

Question

我們一直在使用反應並JSX了一會兒，和條件句，我們已經使用JSX控制語句，我真的很喜歡了：

<If condition={something === true}> 
    <div>Something</div> 
</If> 

最近我們項目已經轉向了TypeScript，這很好，但jsx-control-statements不再起作用。原因是條件表達式不是React組件，而是在傳輸步驟中由Babel處理，這意味着TypeScript不會編譯。

我有什麼選擇？

我曾想過製作一個If組件，但它需要我將結果包裝到一個新元素中，而我不喜歡這個元素。

Answer 1

您沒有提供足夠的信息，但是我認爲它與jsx-control-statements是一個babel插件而不是附帶JSX元素的庫有關。

，使其與打字稿工作，你需要：

（1）添加聲明文件/分型爲全球可用的元素。例如。是這樣的：

declare function If (condition: any): any; 
declare var Choose: any; 
declare function When (condition: any): any; 
declare var Otherwise: any; 

（2）在您的tsconfig.json設置jsx到preserve。您也可以將目標設定爲ES2015，讓babel完成這項工作。

（3）使用babel +插件來傳輸您的JSX。這很可能是您在切換到TypeScript之前的配置。

我自己並沒有使用jsx-control-statements。所以上述可能不需要正常工作，你必須執行額外的步驟。