Reactでstyleタグを作る
CSSで不要な行を非表示にする方法でやっている
GyazzA(C)と同じ方式
CSSで非表示にするだけ
準備
まず各行に段落構造（インデントの深さ）を見て、
section-番号 というcss class nameを付けておく .line.section-番号 というCSSセレクタで行にスタイルを当てれるようになるこれはReactでやっておく
表示を切り替える
<style> タグを更新する
.line:not(.section-番号) 現在表示するべきsection以外を対象にする疑似セレクタ
これに
display: none; を当てれば、消える表示を切り替えるReactコンポーネント
<style> を返せばいいjsexport function PresentationCSS ({currentSection}) {
const css = `.line:not(.section-${currentSection}) { display: none; }`
return <style>{css}</style>
}childrenには普通にCSSが書けちゃう
<PresentationCSS> コンポーネントを使うappから
<PresentationCSS currentSection={3} /> と呼び出すこれで、3ページ目だけを表示するCSSが返ってくる
styleタグはHTMLのどこに書いても良い
Reactの中にstyleタグが書かれれば表示に反映される
ReactでSVGを描くをやってて、なんとなくこんな感じで書けそうだなと思ったらやっぱりできた