React子组件没有随父组件更新问题的解决

前言:今天遇到一个小需求,本来只是修改文案的,结果问题卡了很久很久,想想还是太菜了

问题描述:

根据changePlaceHolder修改AInput的placeholder的默认值,AInput是封装的antd的input组件,期间发现,无论如何改变changePlaceHolder,placeholder显示的都是“显示2”,但其实changePlaceHolder已经是成功改变了的

后面在AInput子组件里面发现,封装的时候,将父组件传的placeholder先在constructor中保存在state里面,使用的时候直接用的this.state.placeholder,造成了子组件没用随父组件更新的结果。

解决方法:

方法一:

在子组件中直接通过placeholder={this.props. placeholder}获取父组件的传值

placeholder={this.props.placeholder}

方法二:

在componentWillReceiveProps对父组件传的参数再一次赋值到state中

componentWillReceiveProps(nextProps) {
    this.setState({placeholder: nextProps.placeholder});
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React中,组件可以通过props将自身的内容绑定到组件,并通过props调用组件的方法。首先,在组件的页面初始化完成后,可以使用this.props调用组件的onRef()方法将组件的内容绑定到组件。具体做法是在组件的componentDidMount()生命周期方法中加入以下代码: ``` componentDidMount() { if (this.props.onRef !== undefined) { this.props.onRef(this); } } ``` 这样,组件页面内容就会被成功地绑定到组件中。接下来,组件可以通过this.props调用组件的方法。例如,组件可以使用以下代码触发组件的changeTypeTable()方法: ``` if (this.props.changeTypeTable !== undefined) { this.props.changeTypeTable("666"); } ``` 这样,组件就可以成功地触发组件的方法。另外,组件还可以通过定义绑定方法onRef()来调用组件的方法。在组件页面中,可以使用以下代码定义onRef()方法: ``` onRef = ref => { this.child = ref; }; ``` 通过这个方法,组件就可以调用组件的方法了。总结起来,组件可以通过props将自身的内容绑定到组件,并通过props调用组件的方法;而组件可以通过定义绑定方法onRef()来调用组件的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [React组件间方法调用](https://blog.csdn.net/noeal/article/details/115300055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值