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

Question

I have a parent component and a child component, I want to pass property from Parent to Child by using {...this.props}, I dont want any action or reducer in the picture,Is it possible to do this?

我的子组件是这样的:-

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

现在如何将 Header 属性从 SampleParent 组件传递到 SampleChild？。请帮助我。

Answer 1

<SampleParent Header="Hello from Parent" />

这会为您解决问题，因为您要将来自 SampleParent 的所有 Prop 传播到 SampleChild，您需要确保 SampleParent如果它是动态的，则仅将其作为 Prop 接收。

如果它是静态 Prop ，您可以在 SampleParent 的 defaultProps 中定义它，并且您将始终传递相同的字符串。

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