React-父子元件傳值
阿新 • • 發佈:2018-12-17
react-父子元件傳值-父傳子
1.父元件往子元件內傳值,只需要通過子元件自定義屬性的方式傳入即可,在子元件中,直接使用this.props.屬性名訪問(ES6class形式的元件,function類的元件直接取引數props.屬性名即可);‘
class Children extends React.Component { constructor(props){ super(props); this.state={ msg:'我是子元件' } } render(){ return ( <div className='children'> <h1>{this.state.msg}</h1> <p>{this.props.pmsg}</p> </div> ) } } class Parent extends React.Component { constructor(){ super(); this.state={ msg:'我是父元件內的資料' } } render(){ return ( <div className='parent'> <h1>我是父元件</h1> <Children pmsg={this.state.msg} /> </div> ) } } ReactDOM.render( <Parent />, document.getElementById('app') )
2.父傳孫,直接一層一層套即可,用法一樣。