如何在一个组件中定义属性并传递给reactJs中的其他组件？

Question

我有一个父组件和一个子组件,我想通过使用{... this.props}将属性从Parent传递给Child,我不想在图片中有任何动作或缩减器,是否可以这样做？

我的孩子组件是这样的: -

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 

我的父组件是这样的: -

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组件中的Header属性传递给SampleChild？请帮助我.

Answer 1

<SampleParent Header="Hello from Parent" />

会做的伎俩给你,因为你是从传播来的所有道具SampleParent到SampleChild你需要确保的SampleParent只是接收它作为一个道具,如果它是动态的.

如果它是一个静态的道具,你可以把它定义defaultProps为SampleParent,你会总是通过相同的字符串.

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