2016-04-21 51 views
0

我使用react.js,我有一個問題。我有兩個組件:兒童和父親。componentDidMount在parrent元素後的子元素中的一些方法

import React, { Component, Children, cloneElement } from 'react' 
import {render} from 'react-dom' 

class Child extends Component { 
    someMethod() { 
     /* Some code... */ 
    } 
    componentDidMount() { 
     /* Some code... */ 
     console.log("Child component did mount!"); 
    } 
    render() { 
     return <span>Child</span> 
    } 
} 

class Parent extends Component { 
    componentDidMount() { 
     /* Some code... */ 
     console.log("Parent component did mount!"); 
    } 
    render() { 
     let children = Children.map(this.props.children, (element, idx) => { 
      return cloneElement(element, { ref: idx }); 
     }); 

     return (
      <div> 
       {children} 
      </div> 
     ) 
    } 
} 

const demo = (
    <Parent> 
     <Child></Child> 
    </Parent> 
); 

render(demo,document.querySelector('#demo')); 

我需要將後運行parrent元素componentDidMount運行子元素(someMethod代碼)的方法。謝謝。 P.S. React和ReactDom版本是0.14.8

回答

0

我找到了解決方案。這不是很好,但它工作。 我使用setTimeout(..., 0) 在子元素中

componentDidMount() { 
    setTimeout(()=>{ 
     /* Some code which will be run after componentDidMount in parent */ 
    },0); 
} 
相關問題