コンテンツのラッパーとして反応コンポーネントを作成します。

Question

私は列コンポーネントを作成したいので、再利用できます。次に、列構成要素が折り返しとして使用されます。どうすればそれを達成できますか？現在、列の内部コンテンツは表示されません。

React.js

const Col = React.createClass({ 

    render() { 

    return (
     <div className='col'> 

     </div> 
    ); 
    } 
}); 

他のモジュール内部の使用方法：HTMLは小道具を通じて子として渡される

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

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

Answer 1

。

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