Question

我在我的app.tsx（入口点）上有这个：

import * as React from "react";
import { render } from "react-dom";
import { Router, Route, browserHistory, IndexRoute } from "react-router";

import layout from "./shared/layout.tsx";
import home from "./home.tsx";
import about from "./about.tsx";
import repos from "./repos.tsx";

render((
    <Router history={browserHistory}>
        <Route path="/" component={layout}>
            <IndexRoute component={home} />
            <Route path="/repos" component={repos} />
            <Route path="/about" component={about} />
        </Route>
    </Router>
), document.getElementById('app'));

一切都很好，但现在我尝试实现服务器端呈现，而我无法呈现"/"的网址home.tsx。

我不知道如何呈现layout.tsx并指定home.tsx作为孩子。

这是layout.tsx：

import * as React from "react";
import Navlink from "./navlink.tsx";

export default React.createClass({
    propTypes: {
        children: React.PropTypes.element.isRequired
    },

    render() {
        return (
            <div>
                <h1>Ghettohub Issues</h1>
                <ul role="nav">
                    <li><Navlink to="/" onlyActiveOnIndex={true}>Home</Navlink></li>
                    <li><Navlink to="/about">About</Navlink></li>
                    <li><Navlink to="/repos">Repos</Navlink></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
})

这就是我在服务器端（index.cshtml）所做的事情：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/assets/styles.css" rel="stylesheet" />
</head>
<body>
    @Html.React("Components.layout", new { }, containerId: "app")
    <script src="~/assets/app.js"></script>
</body>
</html>

那么如何指定我希望home.tsx成为children的{{1}}？

具有子项的服务器端呈现组件

0 个答案: