React学习：组件之间的关系、参数传递-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
React学习：组件之间的关系、参数传递-学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- React學習：組件之間的關系、參數傳遞-學習筆記
- 父到子傳遞參數
- 子-父
- 父-孫
- 兄弟組件傳參
React學習：組件之間的關系、參數傳遞-學習筆記
父到子傳遞參數
<!DOCTYPE html> <html><head><title>組件傳參（父-子）1</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">//父組件class ParentList extends React.Component {constructor() {super();this.state = {name:'老張' ,msg:'我是爸爸'}; }render() {let {name,msg} = this.state;return (<div><h1>我是父組件</h1><div>姓名：{name}</div><div>描述：{msg}</div><ChildList {...this.state} /></div>)}};//子組件class ChildList extends React.Component {constructor(props) { super(); this.state = {name:'child',msg:props.msg}; }render() {let {name} = this.state;return (<div><h1>我是子組件</h1><div>子的姓名：{name}</div><div>爸爸的姓名：{this.props.name}-{this.props.msg}</div></div>)}};ReactDOM.render(<ParentList />,document.getElementById('example'));</script></body> </html> <!DOCTYPE html> <html><head><title>組件傳參（父-子）2</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">//父組件class ParentList extends React.Component {constructor() {super();this.state = {name:'老張' ,msg:'我是爸爸'}; }handleChange(e){this.setState({name:e.target.value})}handleParent(data){this.setState({name:data})}render() {let {name,msg} = this.state;return (<div><h1>我是父組件</h1><div>姓名：{name}</div> <div>描述：{msg}</div><input type="text" value={name} onChange={(event)=>this.handleChange(event)} /><ChildList {...this.state} handleParent={this.handleParent.bind(this)}/></div>)}};//子組件class ChildList extends React.Component {constructor(props) { super(); this.state = {name:'child',parentName:props.name}; }handleChange(e){//this.props.name = '11111' //不能直接修改父this.setState({parentName:e.target.value});this.props.handleParent(e.target.value);}render() {let {name,parentName} = this.state;return (<div><h1>我是子組件</h1><div>子的姓名：{name}</div><div>爸爸的姓名：{this.props.name}-{this.props.msg}</div><input type="text" value={parentName} onChange={(event)=>this.handleChange(event)} /></div>)}};ReactDOM.render(<ParentList />,document.getElementById('example'));</script></body> </html>子-父
<!DOCTYPE html> <html><head><title>組件傳參（子-父）</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">//父組件class ParentList extends React.Component {constructor() {super();this.state = {checked:true}; }change(data,f1){console.log(data);f1();this.setState({checked:data})}render() {let {checked} = this.state;var isCheck = checked?'yes':'no';return (<div><h1>我是父組件:{isCheck}</h1><ChildList check={checked} parentChange={this.change.bind(this)}/></div>)}};//子組件class ChildList extends React.Component {constructor(props) { super(); this.state = {checked:props.check}; }change(){var s = !this.state.checked;this.setState({checked:s});this.props.parentChange(s,this.f1);}f1(){console.log('f1f1f1')}render() {let {name} = this.state;return (<div><div>我是子組件:{/*<input type='checkbox' checked={this.props.check}onChange={()=>this.props.parentChange(false)}/>*/}<input type='checkbox' checked={this.state.checked}onChange={()=>this.change()}/></div></div>)}};ReactDOM.render(<ParentList />,document.getElementById('example'));</script></body> </html>父-孫
<!DOCTYPE html> <html><head><title>組件傳參（父-孫）</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">//父組件class ParentList extends React.Component {constructor() {super();this.state = {color:'red'}; }handleSelect(e){this.setState({color:e.target.value})}render() {var colorArr =['red','blue','green'];var {color} = this.state;return (<div><select value={color} onChange={(event)=>this.handleSelect(event)}>{colorArr.map((item,index)=>{return <option key={index}>{item}</option>})}</select>{this.props.data.map((item,i)=>{return <InputList key={i} obj={item} color2={color} />})}</div>)}};//子組件class InputList extends React.Component {constructor(props) { super(); this.state = {}; }render() {return (<div><input type='text' value={this.props.obj.value}/><BtnList color={this.props.color2} title={this.props.obj.title} /></div>)}};//子組件class BtnList extends React.Component {constructor(props) { super(); this.state = {}; }render() {return <button style={{'color':this.props.color}}>{this.props.title}</button>}};ReactDOM.render(<ParentList data={[{id:1,title:'提交',value:'aaa'},{id:2,title:'編輯',value:'qqq'},{id:3,title:'刪除',value:'www'}]}/>,document.getElementById('example'));</script></body> </html>兄弟組件傳參
<!DOCTYPE html> <html><head><title>組件傳參</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">//父組件class ParentList extends React.Component {constructor() {super();this.state = {data:'12345'}; }change(childA){this.setState({data:childA})}render() {let {data} = this.state;return (<div><ChildListA change={this.change.bind(this)}/><ChildListB {...this.state}/></div>)}};//子組件class ChildListA extends React.Component {constructor(props) { super(); this.state = {name:'AAAA'}; }render() {return (<div><div>我是子組件A:<button onClick={()=>this.props.change(this.state.name)}>按鈕A</button></div></div>)}};class ChildListB extends React.Component {render() {return (<div><div>我是子組件B:{this.props.data}</div> </div>)}};ReactDOM.render(<ParentList />,document.getElementById('example'));</script></body> </html>總結
以上是生活随笔為你收集整理的React学习：组件之间的关系、参数传递-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React学习：双向数据绑定、约束性和非
- 下一篇： React学习：生命周期、过滤器、eve