如何在一个组件中定义属性并传递给 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?

我的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

我的Parent组件是这样的：-

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

现在如何将示例Parent组件中的Header属性传递给示例Child？请帮助我。

Answer 1

<SampleParent Header="Hello from Parent" />

会为你解决这个问题，因为你正在将所有来自 SampleParent 的道具传播到 SampleChild 你需要确保 SampleParent 只是将它作为道具接收，如果它是动态的。

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

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

Answer 2

如果您只是想将 "all" 属性从 parent 传递给 child，您可以这样做。

从渲染 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;

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

How to define property in one component and pass to other component in reactJs?

reactjs

react-redux

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

How to define property in one component and pass to other component in reactJs?

reactjs

react-redux

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