あるコンポーネントでプロパティを定義し、reactJs内の他のコンポーネントに渡す方法は？

Question

親コンポーネントと子コンポーネントがあり、{... this.props}を使用して のプロパティを親から子に渡したい場合は、 ピクチャ内の任意のアクションまたはレデューサが必要ですかこれをする？

私の子コンポーネントは、このようなものです： -

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 

class SampleChild extends Component { 
    constructor(props) { 
    super(props) 
    } 
    render(){ 
    return(
     <div>This is Parent</div> 
     ) 
     } 
    } 

SampleChild.propTypes={ 
     Header:React.PropTypes.string.isRequired 
} 
export default SampleChild 

私の親コンポーネントは、このようなものです： - 今、私はSampleParentコンポーネントからSampleChildにヘッダープロパティを渡すことができますどのように

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 

class SampleParent extends Component { 
    constructor(props) { 
    super(props) 
    } 

    render(){ 
     return(
      <div><SampleChild {...this.props}/></div> 
    ) 
    } 
} 
export default SampleParent 

？私を助けてください。あなたはそれがダイナミックだ場合SampleParentはちょうど小道具としてそれを受け取ることを確認する必要がありSampleParentからSampleChildに来るすべての小道具を拡散しているので、

Answer 1

<SampleParent Header="Hello from Parent" /> 

はあなたのためのトリックを行います。

静的な小道具の場合は、SampleParentの場合はdefaultPropsに定義することができ、常に同じ文字列を渡します。

SampleParent.defaultProps = { 
    Header: 'Hello from Parent' 
} 

Answer 2

"all"小道具を親から子に渡そうとしているだけの場合は、このようにすることができます。 SampleParentをレンダリングしているコンポーネントから

...

<SampleParent /> 

SampleParentコンポーネント：

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 
import SampleChild from './SampleChild'; 

class SampleParent extends Component { 
    render() { 
    return(
     <div> 
     <SampleChild {...this.props} /> 
     </div> 
    ) 
    } 
} 

SampleParent.defaultProps = { 
    Header: "Header from parent" 
} 

export default SampleParent; 

SampleChildコンポーネント：

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 

class SampleChild extends Component { 
    render() { 
    return(
     <div> 
     <div>This is the Header passed from parent:</div> 
     {this.props.Header} 
     </div> 
    ) 
    } 
} 

SampleChild.propTypes = { 
    Header: React.PropTypes.string.isRequired 
} 

export default SampleChild;