如何在一個組件中定義屬性並傳遞給reactJs中的其他組件？

我有一個父組件和一個子組件，我想通過屬性從父到子通過使用{... this.props}，我不想要任何行動或reducer在圖片中，是否有可能去做這個？如何在一個組件中定義屬性並傳遞給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通過頭屬性請幫助我。

來源

2017-02-17 jack123

我不知道我的理解你的父母/孩子關係，我沒有看到包括孩子的父母，只有包括父母在內的孩子是完全相反的。那是對的嗎？ –

你的孩子正在渲染父母，這與邏輯規定相反。請澄清你的問題。在反應中，你通過屬性傳遞屬性，如：'，不知道這是否對你有幫助。 –

@VincasStonys我已經更新了我的問題。請幫助我如何通過使用{... this.props}將父元素的父元素傳遞給子組件 – jack123

<SampleParent Header="Hello from Parent" />

會做的伎倆爲你因爲你傳播來從SampleParent到SampleChild你需要確保SampleParent剛剛收到它作爲一個道具，如果它是動態的所有道具。

如果它是一個靜態道具，你可以在defaultProps中爲SampleParent定義它，你總是會傳遞相同的字符串。

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

來源

2017-02-20 08:47:59

我將作爲屬性傳遞，但您的答案與我的要求不符，請更新它。而且我也不想直接像你那樣通過 – jack123

@jack這裏的問題是你沒有在'SampleParent'組件中設置'Header' prop，因此它不會傳遞給'SampleChild'組件。 –

這就是我想知道如何定義和傳遞給子組件？ – jack123

如果你只是想把所有道具從父母傳給孩子，你可以這樣做。

從正在呈現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;

來源

2017-02-20 20:27:34 grizzthedj

我已經告訴過我不想這樣使用： - ，有沒有什麼方法可以通過SampleParent Component在裏面定義Header，並將它傳遞給SampleChild。 – jack123

是的，你可以。你可以使用defaultProps。我在帖子中編輯了這個。剛剛意識到這已經回答了！ – grizzthedj

如何在一個組件中定義屬性並傳遞給reactJs中的其他組件？

回答

相關問題