Как определить свойство в одном компоненте и передать другому компоненту в reactJs?

у меня есть родительский компонент и компонент ребенок, я хочу передать свойство от родителя к потомку с помощью {...этот.реквизит}, я не хочу любое действие или редуктор на картинке, можно ли это сделать?

мой дочерний компонент выглядит так: -

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 в SampleChild?.Пожалуйста, помогите мне.

8
react-redux reactjs

2 ответов

<SampleParent Header="Hello from Parent" />

сделает трюк для вас, так как вы распространяете все реквизиты, поступающие из SampleParent to SampleChild вы должны убедиться, что SampleParent просто получает его как опору, если он динамический.

если это статическая опора, вы можете определить ее в defaultProps на SampleParent и вы всегда будете проходить одну и ту же строку.

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

Если вы просто пытаетесь пройти "весь" реквизит от родителя к ребенку, вы можете сделать это таким образом.

от компонента, который представляет 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;
1