ReactJS djangoに似たコンポーネントを構造化する方法は？私はフロントエンドの構造を以下に使用していますジャンゴから

：ReactJS djangoに似たコンポーネントを構造化する方法は？私はフロントエンドの構造を以下に使用していますジャンゴから

<body> 
    <div id="main_container"> 
     <div id="header"> 
      {% include "topbar.html" %} 
     </div> 

     <div id="leftbox_scroll"> 
      {% include "left_up.html" %} 
     </div> 

     <div id="ggladsleftcontain"> 
      {% include "ggladsleft.html" %} 
     </div> 

     <div id="main_content_wrap"> 
      <div id="main_content"> 
       {% block main_content %} 



       {% endblock %} 
      </div> 
     </div> 

     <div id="rightside"> 
      {% include "right_side.html" %} 
     </div> 

     <div class="clearer"> </div> 
    </div> 
</body>

これは、基本的なページの構造のセットアップ：ヘッダー、左、右、scrollmenuとコンテンツ領域にバーを。ユーザーがどこかをナビゲートすると、サーバーはコンテンツファイルで応答します。このようなファイルには、「メインコンテンツのブロック」領域を置き換える要求されたコンテンツのみが含まれています。ヘッダーとサイドバーは、コンテンツファイルの上部にある "extends home.html"によって呼び出されます。

リアクションでも同様の機能が可能ですか、すべてのページのレンダリング方法にヘッダーとバーを含める必要がありますか？私はこのような何かを望んでいるだろう：

//main.jsx 
    render() { 
    return (
     <div> 
      <PublicHeader/> 
      <LeftBar/> 
      <Content page={this.page}/> 
      <RightBar/> 
      <Footer/> 
     </div> 
    ) 
}

私はそのコンテンツは、彼がどのように処理するかのユーザーがナビゲートし、現在のページとさえ少ないclaerアイデアをキャッチし、ページを表示する方法を漠然としか考えを持っています。だから、おそらくこれはそれについての考え方が間違っている...しかし、私はヘッダーとバーをすべてのページで定義する必要がありますか？

EDIT：私はdjangoのフロントエンドを完全に放棄しました。すべてがjsxファイルになりますが、bundle.jsだけが単純なindex.htmlに配置されています。

出典

2016-11-02 Stefan

はい、正しいルートを下っています。

これまでのように、ページ本体の基本要素を作成することができました。次に、あなたはDOM要素でこれをレンダリングするReactDOMへの呼び出しを行う必要があります。この例では

<script type="text/javascript"> 
ReactDOM.render(React.createElement(page, {name: "home"}), document.getElementById("content")); 
</script>

を、「ページ」は、あなたが上で定義されてきたように、あなたのページのための要素を反応させています。これに続いて、 'page'要素に渡された小道具が続きます。 this.props.nameとして 'page'反応要素内からこれにアクセスできます。

この方法を使用すると、各ページのページの基本構造を再定義する必要はありません。

出典

2016-11-02 20:39:10

を。このメソッドは、djangoのテンプレートに挿入されるのですか？私は1つのテンプレートしか持っていないし、bundle.jsを含んでいます。フロントエンド全体がjsxになりました。 – Stefan

これはDjangoのテンプレート用ではありません。アイデアは、スニペットを使ってあなたが提供しているファイルにルートノードを作成することですが、それを行うかもしれません。 –

マットはそれを行うための方法を示唆したが、私は別のSO threadで実際の解決策が見つかりました：私は、すべての（質問更新）で、フロントエンドとしてのDjangoを使用していないことを言及するのを忘れ

// think of it outside the context of the router, if you had pluggable 
// portions of your `render`, you might do it like this 
<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/> 

// So with the router it looks like this: 
const routes = (
    <Route component={App}> 
    <Route path="groups" components={{main: Groups, sidebar:  GroupsSidebar}}/> 
    <Route path="users" components={{main: Users, sidebar: UsersSidebar}}> 
     <Route path="users/:userId" component={Profile}/> 
    </Route> 
    </Route> 
) 

class App extends React.Component { 
    render() { 
    const { main, sidebar } = this.props; 
    return (
     <div> 
     <div className="Main"> 
      {main} 
     </div> 
     <div className="Sidebar"> 
      {sidebar} 
     </div> 
     </div> 
    ) 
    } 
} 

class Users extends React.Component { 
    render() { 
    return (
     <div> 
     {/* if at "https://stackoverflow.com/users/123" `children` will be <Profile> */} 
     {/* UsersSidebar will also get <Profile> as this.props.children, 
      so its a little weird, but you can decide which one wants 
      to continue with the nesting */} 
     {this.props.children} 
     </div> 
    ) 
    } 
}

出典

2016-11-03 16:12:16 Stefan

ReactJS djangoに似たコンポーネントを構造化する方法は？私はフロントエンドの構造を以下に使用していますジャンゴから

答えて

関連する問題