Reactjs：用克隆元素返回子元素

我是新手，并且遵循一个教程。我实际上已经复制了起始文件中的代码，但是现在孩子们已经在React devtools中显示，因此没有渲染。组件很好，我可以单独渲染它们。 PhotoGrid不会显示为Main的子项。这是代码：Reactjs：用克隆元素返回子元素

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;

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'));

来源

2017-03-13 Miksu Aaja

{ props.children }将呈现组件的孩子（从你的问题我认为没有必要使用React.cloneElement）。请参见下面修改后的代码：

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

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

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

旁注

阵营路由器最近已经更新至V4。您可能想要使用新的路由器（docs for react-router-4）。

来源

2017-03-13 12:58:12

Reactjs：用克隆元素返回子元素

回答

相关问题