最近将原先同事用jq写的项目改成react的，赶鸭子上架现学现做，现在做好了做个总结
废话不多说根据react官方文档
父传子用props传递
例如我项目中为了实现点击不同的小按钮 弹出与之相对应的文字，点击我知道了关闭相对应的弹框：
实现效果
实现原理是通过点击父组件上的按钮来控制子组件显隐层以及传参数来控制显隐层中的话语变化
第一步父组件页面定义字段
import Tips from '../common/tips';
class Evaluation extends React.Component {
constructor(props) {
super(props);
this.state={
tip:'',
show:false,
}
}
render() {
return（
<>
<div className="content2_bmi"><span>BMI</span> <img id="img1" onClick={this.clickbind.bind(this)} src= {require("../../assets/images/pic1.png")} className="fr question" alt="无"/ ></div>
<divclassName="content3_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
<divclassName="content4_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
<divclassName="content4_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
</>
)
}
}
第二步创建子组件通过props来获取tip字段，并且在onClick(我知道了)事件后改变父组件中的show字段状态
class Tips extends React.PureComponent {
constructor(props) {
super(props);
this.state={
show:this.props.show
}
//console.log(this.state.show)
}
onclick(){
this.props.updateParentState({ show:false})
}
render() {
//console.log(this.props)
return (
<div className="note1" id={this.props.show===true? 'note':''}>
<div>{this.props.tip}</div>
<div onClick={this.onclick.bind(this)}>我知道了</div>
</div>
)
}
}
export default Tips;
子传父用回调函数
第三步回到父组件通过回调方法将子组件的值传给父组件
onChangeState(show){
this.setState(show)
}
//点击小提示按钮出现不同的提示
clickbind=(val)=>{
console.log(val);
if(val==="0"){
this.setState({
tip:'BMI 指数，即身体质量指数，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。'
})
}else if(val==="1"){
this.setState({
tip:'体脂率是指人体内脂肪重量在人体总重量重所占的比例，又称体脂百分数，它反映人体内脂肪含量的多少。'
})
}else if(val==="2"){
this.setState({
tip:'身体年龄是综合体重、身体脂肪率等多种指数计算后的出的，它是一个高于或者低于实际年龄的综合判断身体状况的标准。'
})
}else{
this.setState({
tip:'预算热量是根据你的身体情况，你的目标，每天应该摄入的热量。'
})
}
this.setState({
show:true,
},()=>{console.log(this.state.show)
});
}
render() {
return（
<>
<divclassName="content2_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this，‘0’)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
<divclassName="content3_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this，‘1’)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
<divclassName="content4_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this，‘2’)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
<divclassName="content5_bmi"><span>BMI</span><imgid="img1"onClick={this.clickbind.bind(this，‘3’)}src={require("../../assets/images/pic1.png")}className="fr question"alt="无"/></div>
</>
)
}
网友评论