創建一個反應組件作爲內容的包裝

Question

我想創建一個列組件，我可以重複使用。然後列組件被用作包裝。我怎樣才能做到這一點。目前該列的內容不顯示。

React.js

const Col = React.createClass({ 

    render() { 

    return (
     <div className='col'> 

     </div> 
    ); 
    } 
}); 

使用其他模塊中：

import Col from .... 
... 
return( 

    <Col> 
     <div>Here goes the content ...</div> 
    </Col> 
) 

Answer 1

的HTML被通過道具的孩子通過。

const Col = React.createClass({ 

    render() { 

    return (
     <div className='col'> 
      {this.props.children} 
     </div> 
    ); 
    } 
}); 

Answer 2

To use the component inside the other component you need to wrap around the div of parent component. 


React.js 

const Col = React.createClass({ 

    render() { 

    return (
     <div className='col'> 

     </div> 
    ); 
    } 
}); 
Usage inside other Module: 

import Col from .... 
... 
return( 
    <div> 
    <Col /> 
    </div> 
)