ReactJS如何构造类似于django的组件？答案

【问题标题】：ReactJS how to structure components similar to django?ReactJS如何构造类似于django的组件？
【发布时间】：2017-03-16 07:26:10
【问题描述】：

从 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>

这设置了页面的基本结构：标题、左右栏、滚动菜单和内容区域。当用户导航到某个地方时，服务器会以内容文件进行响应。此类文件仅包含替换“块主要内容”区域的请求内容。标题和侧边栏由内容文件顶部的“extends home.html”调用。

在 React 中是否可以实现类似的功能，或者我的每个页面的渲染方法是否应该包含标题和栏？我希望有这样的事情：

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

我只有一个模糊的概念，即该内容将如何捕获用户导航到的当前页面，甚至不太清楚他将如何处理和显示该页面。所以，这可能是错误的思考方式......但我仍然必须在每个页面中定义标题和栏吗？

编辑：我已经完全放弃了 django 的前端，一切都在 jsx 文件中，只有 bundle.js 被放置在一个简单的 index.html 中。

【问题讨论】：

标签： reactjs

【解决方案1】：

是的，你走的是正确的路线。

因此，您可以为页面主体构建一个基本元素，就像您已经完成的那样。接下来，您应该调用 ReactDOM 以在 DOM 元素中呈现它：

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

在本例中，'page' 是您在上面定义的页面的反应元素。接下来是传递给“页面”元素的道具。您现在可以从“页面”反应元素中以 this.props.name 的形式访问它。

使用此方法，您无需为每个页面重新定义页面的基本结构。

【讨论】：

我忘了提到我根本不使用 django 作为前端（问题已更新）。这个方法是要插入django模板的吧？我只有一个模板，它包含 bundle.js，整个前端现在都在 jsx 中。
当然。不，这不适用于 Django 模板。这个想法是您使用 sn-p 在您提供的文件中创建一个根节点，但是您可能正在这样做。

【解决方案2】：

Matt 暗示了这样做的方法，但我在另一个 SO thread 中找到了实际解决方案：

// 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 "/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>
    )
  }
}

【讨论】：