ZMMという解説動画生成ツールを作っている。
ZMM自体はXMLを受け取るのだけれど、エンドユーザはXMLなんて書きたくないだろうから、ミニマルなフロントエンドを作成して、フロントエンドがXMLを生成してくれるという仕組みを試しに作ってみている。
ところが、自分のReact力がぜんぜん足りていなくて、階層構造を持ったデータをインタラクティブに編集するという仕組みがぜんぜん作れない。一番上位のコンポーネントからデータを切り出して下位のコンポーネントに渡していくということはできる。
const bigData = { part1: {...}, part2: {...} };
return (<App>
<ComponentA {...part1}> // bigDataの一部を渡す
<ComponentB {...part2}> // bigDataの別の一部を渡す
</App>);
でも、下位のコンポーネントがデータを変更したら上位のコンポーネントに変化は伝播するんだろうか？例えばpart1のデータがComponentA内のinput要素で変更されたとして、それはbigDataに反映されるのか？Reactに詳しい賢者に教えてもらいたい。
もし情報が上位に伝播しないとしたら、どうやって全体のデータを再構成してXMLを出力したらいいんだろう？？
自分はScalaには相当詳しいけれど、Reactはぜんぜん知らないことだなあと思う。幅広い知識を身に付けたいものだ。
インターネット知見のコーナー
親でuseStateして、下位にはstateとsetStateを両方Propsとして渡すのよくやってます
— 八雲アナグラ (@AnaTofuZ) 2023年2月4日
interface Props {
stateA: string;
setStateA(): void;
}
てきなこう
(comment) 参照渡しのはずだけど props 破壊変更しても re-render は起きないので、親から state と setState を渡して setState 越しに変更するのがシンプルな手法ですね
id:sora_h
みなさまありがとうございます。基本的にデータは上位コンポーネントで集中管理して、そのビューと変更手段とを渡すという雰囲気になりそうなことがわかりました。
