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

我的父组件是这样的： -

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'
}

Answer 2

如果您只是想将“所有”道具从父母传递给孩子，您可以这样做。

从呈现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中的其他组件？

2 个答案: