jsx-control-statementsピット回避ガイド

babel-plugin-jsx-control-statementsはjsxのbabel強化プラグインで、jsxでコンポーネントで条件レンダリングコードを書くことができます
使用前:

render () {
    return (
        

            {'some condition' ?  true : null}
        
    )
}

使用後:

render () {
    return (
        

            
                true
            
        
    )
}

具体的なインストールと使用方法は公式ドキュメントに行ってめくってみて、複雑ではありません
typescriptプロジェクトで使用する場合は、d.tsファイルを導入する必要があります.通常、プロジェクトルートディレクトリのapp.d.ts(他の名前かもしれません)の一番上にreferenceで参照します.

/// 
/// 
/// 
/// 

正常に動作していますが、react-transition-groupまたは他のライブラリを使用するとchildrenのタイプの導出に失敗し、babel-plugin-jsx-control-statementsがJSXを書き換え、childrenのクラス宣言を追加したため、「これと一致するリロードがありません」とエラーが表示されます.children宣言にはReactNodeタイプが含まれていないためです.
処理方法は次のとおりです.

referenceのbabel-plugin-jsx-control-statements導入をキャンセル

node_modules/babel-plugin-jsx-control-statements/index.d.tsの内容はapp.d.ts内の

にコピーされます.

ReactNodeのタイプをTChildrenの

に追加

// ... babel-plugin-jsx-control-statements/index.d.ts     
declare namespace JSX {
  type TChildren = React.ReactNode | Element | string | number | boolean | null | typeof undefined;

  interface IntrinsicAttributes {
    children?: TChildren | TChildren[];
  }
}