好资源导航 » 文章资讯 » react组件基本用法示例小结

react组件基本用法示例小结

2023-07-26 14:55:03 75

本文实例讲述了react组件基本用法。分享给大家供大家参考，具体如下：

组件间传值：





test

classComextendsReact.Component{ click=()=>{ //console.log(this.input); //console.log(this.p.innerText); console.log(this.refs.my.value);//父组件访问子组件用refs }; render(){ return(

{this.input=input}}/> {this.p=p}}>我是段落

点击

); } } ReactDOM.render(,document.getElementById('app'));

列表：





test

classAddextendsReact.Component{ click=()=>{ this.props.allAdd(this.input.value); }; render(){ const{length}=this.props; return(

{this.input=input}}/> add{length}

) } } classListextendsReact.Component{ render(){ const{list}=this.props; return(

{v} }) }

) } } classAppextendsReact.Component{ state={ list:['吃饭','睡觉','打游戏','游泳'] }; add=(value)=>{ const{list}=this.state;//获取原先的list list.unshift(value);//将添加的值传入list this.setState(list);//重新设置list }; render(){ const{list}=this.state;//获取list return(

) } } ReactDOM.render(,document.getElementById('app'));

受控组件和非受控组件：





test

classComextendsReact.Component{ state={ age:'' }; //非受控组件不受state控制 click=()=>{ console.log(this.input.value); }; change=(event)=>{ console.log(event.target.value); this.setState({ age:event.target.value }) }; render(){ const{age}=this.props; return(

姓名：{this.input=input}}/> 获取姓名年龄：

); }; } ReactDOM.render(,document.getElementById('app'));

组件生命周期：





Test

classComextendsReact.Component{ state={ msg:123 }; sing(){ returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ resolve('唱一首歌'); },1000); }) }; asyncget(){ awaitthis.sing().then((res)=>{ console.log(res); }); }; componentWillMount(){ //will会先执行，但不一定先执行完毕 console.log('之前'); //this.get(); } componentDidMount(){ //进行ajax操作，获取后台数据 console.log('之后'); } shouldComponentUpdate(nextProps,nextState){ const{msg}=this.state; //如果没有 if({msg}!==nextState){ returntrue; } console.log('更新'); returnfalse; } componentWillUpdate(){ console.log('更新之前'); } componentDidUpdate(){ console.log('更新之后'); //再次获取数据 } click=()=>{ this.setState({ msg:234 }) }; render(){ console.log('render'); const{msg}=this.state; return(

{msg}

更新

) } } ReactDOM.render(,document.getElementById('app'));

希望本文所述对大家react程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

react组件基本用法示例小结

{msg}

热门推荐

随机推荐