ReactJS アプリケーションのレイアウト制御_html/css_WEB-ITnose

まず、React を開発する前に、私は backbone.js と marionette.js の開発経験が豊富で、Simple I の考え方については大体理解しているので、それほど難しくないと思います。これは、JSX の奇妙な構文を使用し、JavaScript を使用して html 形式のテンプレートを置き換えることを除けば、View のレンダリングとテンプレートを定義する方法に似ていると思います。最初に開発を始めたときは、大丈夫だと思ってページごとに書き、いくつかの共通部分をレイアウト コンポーネントに割り当てました。直感的には、コンポーネントを階層内に配置できるはずですが、親コンポーネントは子コンポーネントをどのようにレンダリングするのでしょうか。案の定、親コンポーネントで this.props.children 属性を使用して子コンポーネントをレンダリングできることがわかりました。これを書いたところ、問題は、NavBar の title 属性がそれぞれにある必要があるということです。 {this.props.children} のプロパティを子コンポーネントに渡すにはどうすればよいですか?公式 Web サイトで https://facebook.github.io/react/docs/clone-with-props.html を見つけましたが、私は彼の冒頭の文に非常に同意しません

。まれに、React 要素のコピーを作成したい場合があります

もちろん、まだ使用していません Redux、Redux、Redux、重要なことは 3 回言う必要があるため、setTitle コールバックを渡しました子コンポーネントのcomponentDidMount関数はsetTitleを呼び出してヘッダーのタイトルを設定しますが、HTMLのセマンティクスを拡張するためにカスタム属性を追加する他の方法と比較して、HTMLを置き換えるためにJavaScriptを使用することには少しがっかりしています。タグ付けは革新的であり、それも正しいです。この醜いレイアウト制御方法につながるコンポーネントベースの考え方です。大まかな配線設計は次のとおりです。

Layout コンポーネントの実装は次のとおりです。

render:function(){

let ChildrenWithProps = React.Children .map(this.props.children, (child) => {

return React.cloneElement(child, { setTitle: this.setTitle.bind(this ) });

});

return (

{childrenWithProps}

)

}

});