Reactjs：使用cloneElement返回儿童

我对这一点还不熟悉，并遵循一个教程。实际上，我已经从starter文件中复制了代码，但是子项现在确实显示在React devtools中，因此没有呈现。组件很好，我可以单独渲染它们。PhotoGrid不会显示为Main的子级，仅此而已。代码如下：

Main.js

import React from 'react';
import { Link } from 'react-router';

const Main = React.createClass({
    render() {
        const props = this.props;

        return (
            <div>
                <h1>
                    <Link to="/">Reduxstagram</Link>
                </h1>

                { React.cloneElement(props.children, props) }
            </div>
        );
    }
});

export default Main;

从“React”导入React；
从“反应路由器”导入{Link}；
const Main=React.createClass({
render（）{
const props=this.props；
返回(
雷多克斯泰格拉姆
{React.cloneElement（props.children，props）}
);
}
});
导出默认主；

App.js

    import React from 'react';

import { render } from 'react-dom';


// Import css
import css from './styles/style.styl';

// Import Components
import Main from './components/Main';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';

// import react router deps
import { Router, Route, IndexRoute, browserHistory } from 'react-router';


render(
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={PhotoGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}></Route>
    </Route>
  </Router>, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
//导入css
从“./styles/style.styl”导入css；
//导入组件
从“./components/Main”导入Main；
从“./components/Single”导入单个；
从“./components/PhotoGrid”导入PhotoGrid；
//导入路由器deps
从“react Router”导入{Router，Route，IndexRoute，browserHistory}；
渲染(
，document.getElementById（'root'）；

{props.children}

将呈现组件的子级（根据您的问题，我认为没有必要使用

React.cloneElement

）。请参见下面的修改代码：

const Main = React.createClass({
    render() {
        const props = this.props;

        return (
            <div>
                <h1>
                    <Link to="/">Reduxstagram</Link>
                </h1>

                { props.children }
            </div>
        );
    }
});

const Main=React.createClass({
render（）{
const props=this.props；
返回(
雷多克斯泰格拉姆
{props.children}
);
}
});

旁注

React路由器最近已更新为v4。您可能需要使用新路由器（）